uikit 3.12.2 → 3.12.3-dev.8ce29ae1a

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 (90) hide show
  1. package/CHANGELOG.md +24 -2
  2. package/build/scss.js +9 -17
  3. package/dist/css/uikit-core-rtl.css +9 -81
  4. package/dist/css/uikit-core-rtl.min.css +1 -1
  5. package/dist/css/uikit-core.css +9 -81
  6. package/dist/css/uikit-core.min.css +1 -1
  7. package/dist/css/uikit-rtl.css +9 -81
  8. package/dist/css/uikit-rtl.min.css +1 -1
  9. package/dist/css/uikit.css +9 -81
  10. package/dist/css/uikit.min.css +1 -1
  11. package/dist/js/components/countdown.js +2 -2
  12. package/dist/js/components/countdown.min.js +1 -1
  13. package/dist/js/components/filter.js +1 -1
  14. package/dist/js/components/filter.min.js +1 -1
  15. package/dist/js/components/lightbox-panel.js +13 -2
  16. package/dist/js/components/lightbox-panel.min.js +1 -1
  17. package/dist/js/components/lightbox.js +15 -4
  18. package/dist/js/components/lightbox.min.js +1 -1
  19. package/dist/js/components/notification.js +1 -1
  20. package/dist/js/components/notification.min.js +1 -1
  21. package/dist/js/components/parallax.js +34 -8
  22. package/dist/js/components/parallax.min.js +1 -1
  23. package/dist/js/components/slider-parallax.js +30 -13
  24. package/dist/js/components/slider-parallax.min.js +1 -1
  25. package/dist/js/components/slider.js +14 -3
  26. package/dist/js/components/slider.min.js +1 -1
  27. package/dist/js/components/slideshow-parallax.js +30 -13
  28. package/dist/js/components/slideshow-parallax.min.js +1 -1
  29. package/dist/js/components/slideshow.js +13 -2
  30. package/dist/js/components/slideshow.min.js +1 -1
  31. package/dist/js/components/sortable.js +1 -1
  32. package/dist/js/components/sortable.min.js +1 -1
  33. package/dist/js/components/tooltip.js +12 -20
  34. package/dist/js/components/tooltip.min.js +1 -1
  35. package/dist/js/components/upload.js +1 -1
  36. package/dist/js/components/upload.min.js +1 -1
  37. package/dist/js/uikit-core.js +248 -199
  38. package/dist/js/uikit-core.min.js +1 -1
  39. package/dist/js/uikit-icons.js +1 -1
  40. package/dist/js/uikit-icons.min.js +1 -1
  41. package/dist/js/uikit.js +262 -211
  42. package/dist/js/uikit.min.js +1 -1
  43. package/package.json +1 -1
  44. package/src/js/api/hooks.js +3 -3
  45. package/src/js/api/state.js +25 -15
  46. package/src/js/components/countdown.js +1 -1
  47. package/src/js/components/lightbox.js +1 -1
  48. package/src/js/components/parallax.js +2 -1
  49. package/src/js/components/slider-parallax.js +6 -4
  50. package/src/js/components/slider.js +1 -1
  51. package/src/js/core/core.js +2 -17
  52. package/src/js/core/cover.js +3 -6
  53. package/src/js/core/drop.js +5 -10
  54. package/src/js/core/form-custom.js +6 -7
  55. package/src/js/core/gif.js +5 -3
  56. package/src/js/core/height-match.js +21 -1
  57. package/src/js/core/height-viewport.js +1 -6
  58. package/src/js/core/img.js +1 -2
  59. package/src/js/core/leader.js +7 -13
  60. package/src/js/core/margin.js +18 -1
  61. package/src/js/core/overflow-auto.js +8 -7
  62. package/src/js/core/scroll.js +6 -2
  63. package/src/js/core/scrollspy-nav.js +16 -16
  64. package/src/js/core/scrollspy.js +9 -15
  65. package/src/js/core/sticky.js +7 -3
  66. package/src/js/core/svg.js +16 -14
  67. package/src/js/core/toggle.js +16 -13
  68. package/src/js/core/video.js +2 -8
  69. package/src/js/mixin/media.js +29 -5
  70. package/src/js/mixin/position.js +10 -18
  71. package/src/js/mixin/resize.js +13 -0
  72. package/src/js/mixin/slider.js +2 -1
  73. package/src/js/util/class.js +1 -6
  74. package/src/js/util/mouse.js +1 -1
  75. package/src/js/util/observer.js +57 -20
  76. package/src/js/util/style.js +1 -1
  77. package/src/less/components/base.less +0 -19
  78. package/src/less/components/form.less +1 -9
  79. package/src/less/components/icon.less +6 -0
  80. package/src/less/components/list.less +1 -0
  81. package/src/less/components/search.less +0 -3
  82. package/src/less/components/utility.less +0 -9
  83. package/src/scss/components/base.scss +0 -19
  84. package/src/scss/components/form.scss +1 -7
  85. package/src/scss/components/icon.scss +6 -0
  86. package/src/scss/components/list.scss +1 -0
  87. package/src/scss/components/search.scss +0 -1
  88. package/src/scss/components/utility.scss +0 -9
  89. package/src/scss/mixins-theme.scss +0 -4
  90. package/src/scss/mixins.scss +0 -4
package/dist/js/uikit.js CHANGED
@@ -1,4 +1,4 @@
1
- /*! UIkit 3.12.2 | https://www.getuikit.com | (c) 2014 - 2022 YOOtheme | MIT License */
1
+ /*! UIkit 3.12.3-dev.8ce29ae1a | 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() :
@@ -809,7 +809,7 @@
809
809
  // https://drafts.csswg.org/cssom/#dom-cssstyledeclaration-setproperty
810
810
  const propName = memoize((name) => vendorPropName(name));
811
811
 
812
- const cssPrefixes = ['webkit', 'moz', 'ms'];
812
+ const cssPrefixes = ['webkit', 'moz'];
813
813
 
814
814
  function vendorPropName(name) {
815
815
  name = hyphenate(name);
@@ -850,12 +850,7 @@
850
850
 
851
851
  function hasClass(element, cls) {
852
852
  [cls] = getClasses(cls);
853
- for (const node of toNodes(element)) {
854
- if (cls && node.classList.contains(cls)) {
855
- return true;
856
- }
857
- }
858
- return false;
853
+ return !!cls && toNodes(element).some((node) => node.classList.contains(cls));
859
854
  }
860
855
 
861
856
  function toggleClass(element, cls, force) {
@@ -1409,8 +1404,8 @@
1409
1404
  }, 50);
1410
1405
  },
1411
1406
 
1412
- cancel() {
1413
- this.unbind && this.unbind();
1407
+ cancel() {var _this$unbind;
1408
+ (_this$unbind = this.unbind) == null ? void 0 : _this$unbind.call(this);
1414
1409
  this.interval && clearInterval(this.interval);
1415
1410
  },
1416
1411
 
@@ -1467,34 +1462,69 @@
1467
1462
  return { x: x1 + ua * (x2 - x1), y: y1 + ua * (y2 - y1) };
1468
1463
  }
1469
1464
 
1470
- // Old chromium based browsers (UC Browser) did not implement `isIntersecting`
1471
- const hasIntersectionObserver =
1472
- window.IntersectionObserver && 'isIntersecting' in IntersectionObserverEntry.prototype;
1473
1465
  function observeIntersection(targets, cb, options, intersecting) {if (intersecting === void 0) {intersecting = true;}
1474
- if (!hasIntersectionObserver) {
1475
- return;
1476
- }
1477
-
1478
- const observer = new IntersectionObserver((entries, observer) => {
1479
- if (!intersecting || entries.some((entry) => entry.isIntersecting)) {
1466
+ return observe(
1467
+ IntersectionObserver,
1468
+ targets,
1469
+ intersecting ?
1470
+ (entries, observer) => {
1471
+ if (entries.some((entry) => entry.isIntersecting)) {
1480
1472
  cb(entries, observer);
1481
1473
  }
1482
- }, options);
1483
- for (const el of toNodes(targets)) {
1484
- observer.observe(el);
1485
- }
1486
- return observer;
1474
+ } :
1475
+ cb,
1476
+ options);
1477
+
1487
1478
  }
1488
1479
 
1489
1480
  const hasResizeObserver = window.ResizeObserver;
1490
1481
  function observeResize(targets, cb, options) {if (options === void 0) {options = { box: 'border-box' };}
1491
- if (!hasResizeObserver) {
1482
+ if (hasResizeObserver) {
1483
+ return observe(ResizeObserver, targets, cb, options);
1484
+ }
1485
+
1486
+ // Fallback Safari < 13.1
1487
+ initResizeListener();
1488
+ listeners.add(cb);
1489
+
1490
+ return {
1491
+ disconnect() {
1492
+ listeners.delete(cb);
1493
+ } };
1494
+
1495
+ }
1496
+
1497
+ let listeners;
1498
+ function initResizeListener() {
1499
+ if (listeners) {
1492
1500
  return;
1493
1501
  }
1494
1502
 
1495
- const observer = new ResizeObserver((entries, observer) => {
1496
- cb(entries, observer);
1497
- });
1503
+ listeners = new Set();
1504
+
1505
+ // throttle 'resize'
1506
+ let pendingResize;
1507
+ const handleResize = () => {
1508
+ if (pendingResize) {
1509
+ return;
1510
+ }
1511
+ pendingResize = true;
1512
+ fastdom.read(() => pendingResize = false);
1513
+ for (const listener of listeners) {
1514
+ listener();
1515
+ }
1516
+ };
1517
+
1518
+ on(window, 'load resize', handleResize);
1519
+ on(document, 'loadedmetadata load', handleResize, true);
1520
+ }
1521
+
1522
+ function observeMutation(targets, cb, options) {
1523
+ return observe(MutationObserver, targets, cb, options);
1524
+ }
1525
+
1526
+ function observe(Observer, targets, cb, options) {
1527
+ const observer = new Observer(cb);
1498
1528
  for (const el of toNodes(targets)) {
1499
1529
  observer.observe(el, options);
1500
1530
  }
@@ -2179,9 +2209,9 @@
2179
2209
  memoize: memoize,
2180
2210
  Deferred: Deferred,
2181
2211
  MouseTracker: MouseTracker,
2182
- hasIntersectionObserver: hasIntersectionObserver,
2183
2212
  observeIntersection: observeIntersection,
2184
2213
  observeResize: observeResize,
2214
+ observeMutation: observeMutation,
2185
2215
  mergeOptions: mergeOptions,
2186
2216
  parseOptions: parseOptions,
2187
2217
  play: play,
@@ -2289,7 +2319,7 @@
2289
2319
  }
2290
2320
 
2291
2321
  this._data = {};
2292
- this._computeds = {};
2322
+ this._computed = {};
2293
2323
 
2294
2324
  this._initProps();
2295
2325
 
@@ -2383,8 +2413,8 @@
2383
2413
  const {
2384
2414
  $options: { computed } } =
2385
2415
  this;
2386
- const values = { ...this._computeds };
2387
- this._computeds = {};
2416
+ const values = { ...this._computed };
2417
+ this._computed = {};
2388
2418
 
2389
2419
  for (const key in computed) {
2390
2420
  const { watch, immediate } = computed[key];
@@ -2442,7 +2472,7 @@
2442
2472
  UIkit.prototype._initComputeds = function () {
2443
2473
  const { computed } = this.$options;
2444
2474
 
2445
- this._computeds = {};
2475
+ this._computed = {};
2446
2476
 
2447
2477
  if (computed) {
2448
2478
  for (const key in computed) {
@@ -2481,11 +2511,9 @@
2481
2511
  }
2482
2512
  }
2483
2513
  }
2484
- for (const { events = [] } of this.$options.update || []) {
2485
- if (includes(events, 'scroll')) {
2486
- registerScrollListener(this._uid, () => this.$emit('scroll'));
2487
- break;
2488
- }
2514
+
2515
+ if (hasUpdateOfType(this.$options.update, 'scroll')) {
2516
+ registerScrollListener(this._uid, () => this.$emit('scroll'));
2489
2517
  }
2490
2518
  };
2491
2519
 
@@ -2496,7 +2524,11 @@
2496
2524
  };
2497
2525
 
2498
2526
  UIkit.prototype._initObservers = function () {
2499
- this._observers = [initChildListObserver(this), initPropsObserver(this)];
2527
+ this._observers = [initPropsObserver(this)];
2528
+
2529
+ if (this.$options.computed) {
2530
+ this.registerObserver(initChildListObserver(this));
2531
+ }
2500
2532
  };
2501
2533
 
2502
2534
  UIkit.prototype.registerObserver = function (observer) {
@@ -2550,22 +2582,22 @@
2550
2582
  enumerable: true,
2551
2583
 
2552
2584
  get() {
2553
- const { _computeds, $props, $el } = component;
2585
+ const { _computed, $props, $el } = component;
2554
2586
 
2555
- if (!hasOwn(_computeds, key)) {
2556
- _computeds[key] = (cb.get || cb).call(component, $props, $el);
2587
+ if (!hasOwn(_computed, key)) {
2588
+ _computed[key] = (cb.get || cb).call(component, $props, $el);
2557
2589
  }
2558
2590
 
2559
- return _computeds[key];
2591
+ return _computed[key];
2560
2592
  },
2561
2593
 
2562
2594
  set(value) {
2563
- const { _computeds } = component;
2595
+ const { _computed } = component;
2564
2596
 
2565
- _computeds[key] = cb.set ? cb.set.call(component, value) : value;
2597
+ _computed[key] = cb.set ? cb.set.call(component, value) : value;
2566
2598
 
2567
- if (isUndefined(_computeds[key])) {
2568
- delete _computeds[key];
2599
+ if (isUndefined(_computed[key])) {
2600
+ delete _computed[key];
2569
2601
  }
2570
2602
  } });
2571
2603
 
@@ -2693,6 +2725,14 @@
2693
2725
  return observer;
2694
2726
  }
2695
2727
 
2728
+ function hasUpdateOfType(updates, type) {if (updates === void 0) {updates = [];}
2729
+ for (const { events = [] } of updates) {
2730
+ if (includes(events, type)) {
2731
+ return true;
2732
+ }
2733
+ }
2734
+ }
2735
+
2696
2736
  const scrollListeners = new Map();
2697
2737
  let unbindScrollListener;
2698
2738
  function registerScrollListener(id, listener) {
@@ -2887,7 +2927,7 @@
2887
2927
  UIkit.data = '__uikit__';
2888
2928
  UIkit.prefix = 'uk-';
2889
2929
  UIkit.options = {};
2890
- UIkit.version = '3.12.2';
2930
+ UIkit.version = '3.12.3-dev.8ce29ae1a';
2891
2931
 
2892
2932
  globalAPI(UIkit);
2893
2933
  hooksAPI(UIkit);
@@ -2895,26 +2935,11 @@
2895
2935
  componentAPI(UIkit);
2896
2936
  instanceAPI(UIkit);
2897
2937
 
2898
- function Core (UIkit) {
2938
+ function Core () {
2899
2939
  if (!inBrowser) {
2900
2940
  return;
2901
2941
  }
2902
2942
 
2903
- // throttle 'resize'
2904
- let pendingResize;
2905
- const handleResize = () => {
2906
- if (pendingResize) {
2907
- return;
2908
- }
2909
- pendingResize = true;
2910
- fastdom.read(() => pendingResize = false);
2911
- UIkit.update(null, 'resize');
2912
- };
2913
-
2914
- on(window, 'load resize', handleResize);
2915
- on(document, 'loadedmetadata load', handleResize, true);
2916
- observeResize(document.documentElement, handleResize);
2917
-
2918
2943
  let started = 0;
2919
2944
  on(
2920
2945
  document,
@@ -3381,13 +3406,9 @@
3381
3406
  autoplay: true },
3382
3407
 
3383
3408
 
3384
- computed: {
3385
- inView(_ref) {let { autoplay } = _ref;
3386
- return autoplay === 'inview';
3387
- } },
3388
-
3389
-
3390
3409
  connected() {
3410
+ this.inView = this.autoplay === 'inview';
3411
+
3391
3412
  if (this.inView && !hasAttr(this.$el, 'preload')) {
3392
3413
  this.$el.preload = 'none';
3393
3414
  }
@@ -3411,18 +3432,27 @@
3411
3432
 
3412
3433
  },
3413
3434
 
3414
- write(_ref2) {let { visible, inView } = _ref2;
3435
+ write(_ref) {let { visible, inView } = _ref;
3415
3436
  if (!visible || this.inView && !inView) {
3416
3437
  pause(this.$el);
3417
3438
  } else if (this.autoplay === true || this.inView && inView) {
3418
3439
  play(this.$el);
3419
3440
  }
3420
- },
3441
+ } } };
3442
+
3443
+ var Resize = {
3444
+ computed: {
3445
+ resizeTargets() {
3446
+ return this.$el;
3447
+ } },
3421
3448
 
3422
- events: ['resize', 'scroll'] } };
3449
+
3450
+ connected() {
3451
+ this.registerObserver(observeResize(this.resizeTargets, () => this.$emit('resize')));
3452
+ } };
3423
3453
 
3424
3454
  var cover = {
3425
- mixins: [Video],
3455
+ mixins: [Resize, Video],
3426
3456
 
3427
3457
  props: {
3428
3458
  width: Number,
@@ -3433,10 +3463,6 @@
3433
3463
  automute: true },
3434
3464
 
3435
3465
 
3436
- connected() {
3437
- this.registerObserver(observeResize(this.$el, () => this.$emit('resize')));
3438
- },
3439
-
3440
3466
  update: {
3441
3467
  read() {
3442
3468
  const el = this.$el;
@@ -3505,19 +3531,11 @@
3505
3531
  clsPos: '' },
3506
3532
 
3507
3533
 
3508
- computed: {
3509
- pos(_ref) {let { pos } = _ref;
3510
- return pos.split('-').concat('center').slice(0, 2);
3511
- },
3512
-
3513
- dir() {
3514
- return this.pos[0];
3515
- },
3516
-
3517
- align() {
3518
- return this.pos[1];
3519
- } },
3520
-
3534
+ connected() {
3535
+ this.pos = this.pos.split('-').concat('center').slice(0, 2);
3536
+ this.dir = this.pos[0];
3537
+ this.align = this.pos[1];
3538
+ },
3521
3539
 
3522
3540
  methods: {
3523
3541
  positionAt(element, target, boundary) {
@@ -3525,6 +3543,8 @@
3525
3543
 
3526
3544
  let { offset: offset$1 } = this;
3527
3545
  const axis = this.getAxis();
3546
+ const dir = this.pos[0];
3547
+ const align = this.pos[1];
3528
3548
 
3529
3549
  if (!isNumeric(offset$1)) {
3530
3550
  const node = $(offset$1);
@@ -3537,13 +3557,11 @@
3537
3557
  const { x, y } = positionAt(
3538
3558
  element,
3539
3559
  target,
3540
- axis === 'x' ?
3541
- flipPosition(this.dir) + " " + this.align :
3542
- this.align + " " + flipPosition(this.dir),
3543
- axis === 'x' ? this.dir + " " + this.align : this.align + " " + this.dir,
3560
+ axis === 'x' ? flipPosition(dir) + " " + align : align + " " + flipPosition(dir),
3561
+ axis === 'x' ? dir + " " + align : align + " " + dir,
3544
3562
  axis === 'x' ? "" + (
3545
- this.dir === 'left' ? -offset$1 : offset$1) : " " + (
3546
- this.dir === 'top' ? -offset$1 : offset$1),
3563
+ dir === 'left' ? -offset$1 : offset$1) : " " + (
3564
+ dir === 'top' ? -offset$1 : offset$1),
3547
3565
  null,
3548
3566
  this.flip,
3549
3567
  boundary).
@@ -3755,9 +3773,7 @@
3755
3773
 
3756
3774
  this.tracker.init();
3757
3775
 
3758
- once(
3759
- this.$el,
3760
- 'hide',
3776
+ for (const handler of [
3761
3777
  on(
3762
3778
  document,
3763
3779
  pointerDown,
@@ -3779,19 +3795,16 @@
3779
3795
  true));}),
3780
3796
 
3781
3797
 
3782
- { self: true });
3783
3798
 
3784
-
3785
- once(
3786
- this.$el,
3787
- 'hide',
3788
3799
  on(document, 'keydown', (e) => {
3789
3800
  if (e.keyCode === 27) {
3790
3801
  this.hide(false);
3791
3802
  }
3792
3803
  }),
3793
- { self: true });
3794
-
3804
+ on(window, 'resize', () => this.$emit('resize'))])
3805
+ {
3806
+ once(this.$el, 'hide', handler, { self: true });
3807
+ }
3795
3808
  } },
3796
3809
 
3797
3810
 
@@ -3964,7 +3977,7 @@
3964
3977
  } },
3965
3978
 
3966
3979
 
3967
- update() {
3980
+ update() {var _input$files;
3968
3981
  const { target, input } = this;
3969
3982
 
3970
3983
  if (!target) {
@@ -3974,8 +3987,7 @@
3974
3987
  let option;
3975
3988
  const prop = isInput(target) ? 'value' : 'textContent';
3976
3989
  const prev = target[prop];
3977
- const value =
3978
- input.files && input.files[0] ?
3990
+ const value = (_input$files = input.files) != null && _input$files[0] ?
3979
3991
  input.files[0].name :
3980
3992
  matches(input, 'select') && (
3981
3993
  option = $$('option', input).filter((el) => el.selected)[0]) // eslint-disable-line prefer-destructuring
@@ -4009,6 +4021,10 @@
4009
4021
 
4010
4022
  // Deprecated
4011
4023
  var gif = {
4024
+ connected() {
4025
+ this.registerObserver(observeIntersection(this.$el, () => this.$emit()));
4026
+ },
4027
+
4012
4028
  update: {
4013
4029
  read(data) {
4014
4030
  const inview = isInView(this.$el);
@@ -4022,9 +4038,7 @@
4022
4038
 
4023
4039
  write() {
4024
4040
  this.$el.src = '' + this.$el.src; // force self-assign
4025
- },
4026
-
4027
- events: ['scroll', 'resize'] } };
4041
+ } } };
4028
4042
 
4029
4043
  var Margin = {
4030
4044
  props: {
@@ -4037,6 +4051,16 @@
4037
4051
  firstColumn: 'uk-first-column' },
4038
4052
 
4039
4053
 
4054
+ connected() {
4055
+ this.registerObserver(
4056
+ observeMutation(this.$el, () => this.$reset(), {
4057
+ childList: true }));
4058
+
4059
+
4060
+
4061
+ this.registerObserver(observeResize(this.$el.children, () => this.$emit('resize')));
4062
+ },
4063
+
4040
4064
  update: {
4041
4065
  read() {
4042
4066
  const rows = getRows(this.$el.children);
@@ -4301,9 +4325,21 @@
4301
4325
  computed: {
4302
4326
  elements(_ref, $el) {let { target } = _ref;
4303
4327
  return $$(target, $el);
4328
+ },
4329
+
4330
+ resizeTargets() {
4331
+ this.$el.children;
4304
4332
  } },
4305
4333
 
4306
4334
 
4335
+ connected() {
4336
+ this.registerObserver(
4337
+ observeMutation(this.$el, () => this.$reset(), {
4338
+ childList: true }));
4339
+
4340
+
4341
+ },
4342
+
4307
4343
  update: {
4308
4344
  read() {
4309
4345
  return {
@@ -4417,13 +4453,9 @@
4417
4453
  return { minHeight, prev };
4418
4454
  },
4419
4455
 
4420
- write(_ref2) {let { minHeight, prev } = _ref2;
4456
+ write(_ref2) {let { minHeight } = _ref2;
4421
4457
  css(this.$el, { minHeight });
4422
4458
 
4423
- if (minHeight !== prev) {
4424
- trigger(this.$el, 'resize');
4425
- }
4426
-
4427
4459
  if (this.minHeight && toFloat(css(this.$el, 'minHeight')) < this.minHeight) {
4428
4460
  css(this.$el, 'minHeight', this.minHeight);
4429
4461
  }
@@ -4473,10 +4505,24 @@
4473
4505
  }
4474
4506
 
4475
4507
  this.applyAttributes(svg, el);
4476
- this.$emit();
4508
+
4477
4509
  return this.svgEl = svg;
4478
4510
  }
4479
4511
  }, noop);
4512
+
4513
+ if (this.strokeAnimation) {
4514
+ this.svg.then((el) => {
4515
+ if (this._connected) {
4516
+ applyAnimation(el);
4517
+ this.registerObserver(
4518
+ observeIntersection(el, (records, observer) => {
4519
+ applyAnimation(el);
4520
+ observer.disconnect();
4521
+ }));
4522
+
4523
+ }
4524
+ });
4525
+ }
4480
4526
  },
4481
4527
 
4482
4528
  disconnected() {
@@ -4496,18 +4542,6 @@
4496
4542
  this.svg = null;
4497
4543
  },
4498
4544
 
4499
- update: {
4500
- read() {
4501
- return !!(this.strokeAnimation && this.svgEl && isVisible(this.svgEl));
4502
- },
4503
-
4504
- write() {
4505
- applyAnimation(this.svgEl);
4506
- },
4507
-
4508
- type: ['resize'] },
4509
-
4510
-
4511
4545
  methods: {
4512
4546
  async getSvg() {
4513
4547
  if (isTag(this.$el, 'img') && !this.$el.complete && this.$el.loading === 'lazy') {
@@ -4857,7 +4891,7 @@
4857
4891
 
4858
4892
 
4859
4893
  connected() {
4860
- if (this.loading !== 'lazy' || !hasIntersectionObserver) {
4894
+ if (this.loading !== 'lazy') {
4861
4895
  this.load();
4862
4896
  return;
4863
4897
  }
@@ -5065,16 +5099,31 @@
5065
5099
 
5066
5100
 
5067
5101
  computed: {
5068
- matchMedia() {
5069
- const media = toMedia(this.media);
5070
- return !media || window.matchMedia(media).matches;
5071
- } } };
5102
+ matchMedia() {var _this$mediaObj;
5103
+ return (_this$mediaObj = this.mediaObj) == null ? void 0 : _this$mediaObj.matches;
5104
+ } },
5105
+
5106
+
5107
+ connected() {
5108
+ const media = toMedia(this.media);
5109
+ this.mediaObj = window.matchMedia(media);
5110
+ const handler = () =>
5111
+ trigger(this.$el, createEvent('mediachange', false, true, [this.mediaObj]));
5112
+ this.offMediaObj = on(this.mediaObj, 'change', () => {
5113
+ handler();
5114
+ this.$emit('resize');
5115
+ });
5116
+ handler();
5117
+ },
5072
5118
 
5119
+ disconnected() {var _this$offMediaObj;
5120
+ (_this$offMediaObj = this.offMediaObj) == null ? void 0 : _this$offMediaObj.call(this);
5121
+ } };
5073
5122
 
5074
5123
 
5075
5124
  function toMedia(value) {
5076
5125
  if (isString(value)) {
5077
- if (value[0] === '@') {
5126
+ if (startsWith(value, '@')) {
5078
5127
  const name = "breakpoint-" + value.substr(1);
5079
5128
  value = toFloat(getCssVar(name));
5080
5129
  } else if (isNaN(value)) {
@@ -5082,11 +5131,11 @@
5082
5131
  }
5083
5132
  }
5084
5133
 
5085
- return value && !isNaN(value) ? "(min-width: " + value + "px)" : false;
5134
+ return value && isNumeric(value) ? "(min-width: " + value + "px)" : '';
5086
5135
  }
5087
5136
 
5088
5137
  var leader = {
5089
- mixins: [Class, Media],
5138
+ mixins: [Class, Media, Resize],
5090
5139
 
5091
5140
  props: {
5092
5141
  fill: String },
@@ -5114,26 +5163,19 @@
5114
5163
  },
5115
5164
 
5116
5165
  update: {
5117
- read(_ref2) {let { changed, width } = _ref2;
5118
- const prev = width;
5119
-
5120
- width = Math.floor(this.$el.offsetWidth / 2);
5166
+ read() {
5167
+ const width = Math.trunc(this.$el.offsetWidth / 2);
5121
5168
 
5122
5169
  return {
5123
5170
  width,
5124
5171
  fill: this.fill,
5125
- changed: changed || prev !== width,
5126
5172
  hide: !this.matchMedia };
5127
5173
 
5128
5174
  },
5129
5175
 
5130
- write(data) {
5131
- toggleClass(this.wrapper, this.clsHide, data.hide);
5132
-
5133
- if (data.changed) {
5134
- data.changed = false;
5135
- attr(this.wrapper, this.attrFill, new Array(data.width).join(data.fill));
5136
- }
5176
+ write(_ref2) {let { width, fill, hide } = _ref2;
5177
+ toggleClass(this.wrapper, this.clsHide, hide);
5178
+ attr(this.wrapper, this.attrFill, new Array(width).join(fill));
5137
5179
  },
5138
5180
 
5139
5181
  events: ['resize'] } };
@@ -6238,7 +6280,7 @@
6238
6280
  }
6239
6281
 
6240
6282
  var overflowAuto = {
6241
- mixins: [Class],
6283
+ mixins: [Class, Resize],
6242
6284
 
6243
6285
  props: {
6244
6286
  selContainer: String,
@@ -6259,6 +6301,10 @@
6259
6301
 
6260
6302
  content(_ref2, $el) {let { selContent } = _ref2;
6261
6303
  return closest($el, selContent);
6304
+ },
6305
+
6306
+ resizeTargets() {
6307
+ return [this.container, this.content];
6262
6308
  } },
6263
6309
 
6264
6310
 
@@ -6273,7 +6319,6 @@
6273
6319
  }
6274
6320
 
6275
6321
  return {
6276
- current: toFloat(css(this.$el, 'maxHeight')),
6277
6322
  max: Math.max(
6278
6323
  this.minHeight,
6279
6324
  height(this.container) - (dimensions$1(this.content).height - height(this.$el))) };
@@ -6281,11 +6326,8 @@
6281
6326
 
6282
6327
  },
6283
6328
 
6284
- write(_ref3) {let { current, max } = _ref3;
6329
+ write(_ref3) {let { max } = _ref3;
6285
6330
  css(this.$el, 'maxHeight', max);
6286
- if (Math.round(current) !== Math.round(max)) {
6287
- trigger(this.$el, 'resize');
6288
- }
6289
6331
  },
6290
6332
 
6291
6333
  events: ['resize'] } };
@@ -6346,9 +6388,15 @@
6346
6388
  }
6347
6389
 
6348
6390
  e.preventDefault();
6349
- this.scrollTo("#" + escape(decodeURIComponent((this.$el.hash || '').substr(1))));
6391
+ this.scrollTo(getTargetElement(this.$el));
6350
6392
  } } };
6351
6393
 
6394
+
6395
+
6396
+ function getTargetElement(el) {
6397
+ return document.getElementById(decodeURIComponent(el.hash).substring(1));
6398
+ }
6399
+
6352
6400
  const stateKey = '_ukScrollspy';
6353
6401
  var scrollspy = {
6354
6402
  args: 'cls',
@@ -6391,24 +6439,15 @@
6391
6439
 
6392
6440
 
6393
6441
  disconnected() {
6394
- for (const el of this.elements) {
6395
- removeClass(el, this.inViewClass, el[stateKey] ? el[stateKey].cls : '');
6442
+ for (const el of this.elements) {var _el$stateKey;
6443
+ removeClass(el, this.inViewClass, ((_el$stateKey = el[stateKey]) == null ? void 0 : _el$stateKey.cls) || '');
6396
6444
  delete el[stateKey];
6397
6445
  }
6398
6446
  },
6399
6447
 
6400
6448
  update: [
6401
6449
  {
6402
- read(data$1) {
6403
- // Let child components be applied at least once first
6404
- if (!data$1.update) {
6405
- Promise.resolve().then(() => {
6406
- this.$emit();
6407
- data$1.update = true;
6408
- });
6409
- return false;
6410
- }
6411
-
6450
+ read() {
6412
6451
  for (const el of this.elements) {
6413
6452
  if (!el[stateKey]) {
6414
6453
  el[stateKey] = { cls: data(el, 'uk-scrollspy-class') || this.cls };
@@ -6448,7 +6487,7 @@
6448
6487
  toggle(el, inview) {
6449
6488
  const state = el[stateKey];
6450
6489
 
6451
- state.off && state.off();
6490
+ state.off == null ? void 0 : state.off();
6452
6491
 
6453
6492
  css(el, 'visibility', !inview && this.hidden ? 'hidden' : '');
6454
6493
 
@@ -6456,9 +6495,12 @@
6456
6495
  toggleClass(el, state.cls);
6457
6496
 
6458
6497
  if (/\buk-animation-/.test(state.cls)) {
6459
- state.off = once(el, 'animationcancel animationend', () =>
6460
- removeClasses(el, 'uk-animation-[\\w-]+'));
6461
-
6498
+ const removeAnimationClasses = () => removeClasses(el, 'uk-animation-[\\w-]+');
6499
+ if (inview) {
6500
+ state.off = once(el, 'animationcancel animationend', removeAnimationClasses);
6501
+ } else {
6502
+ removeAnimationClasses();
6503
+ }
6462
6504
  }
6463
6505
 
6464
6506
  trigger(el, inview ? 'inview' : 'outview');
@@ -6500,10 +6542,6 @@
6500
6542
  immediate: true },
6501
6543
 
6502
6544
 
6503
- targets() {
6504
- return $$(this.links.map((el) => escape(el.hash).substr(1)).join(','));
6505
- },
6506
-
6507
6545
  elements(_ref) {let { closest: selector } = _ref;
6508
6546
  return closest(this.links, selector || '*');
6509
6547
  } },
@@ -6512,13 +6550,15 @@
6512
6550
  update: [
6513
6551
  {
6514
6552
  read() {
6515
- const { length } = this.targets;
6553
+ const targets = this.links.map(getTargetElement).filter(Boolean);
6554
+
6555
+ const { length } = targets;
6516
6556
 
6517
6557
  if (!length || !isVisible(this.$el)) {
6518
6558
  return false;
6519
6559
  }
6520
6560
 
6521
- const [scrollElement] = scrollParents(this.targets, /auto|scroll/, true);
6561
+ const [scrollElement] = scrollParents(targets, /auto|scroll/, true);
6522
6562
  const { scrollTop, scrollHeight } = scrollElement;
6523
6563
  const max = scrollHeight - getViewportClientHeight(scrollElement);
6524
6564
  let active = false;
@@ -6526,15 +6566,17 @@
6526
6566
  if (scrollTop === max) {
6527
6567
  active = length - 1;
6528
6568
  } else {
6529
- this.targets.every((el, i) => {
6569
+ for (const i in targets) {
6530
6570
  if (
6531
- offset(el).top - offset(getViewport$1(scrollElement)).top - this.offset <=
6571
+ offset(targets[i]).top -
6572
+ offset(getViewport$1(scrollElement)).top -
6573
+ this.offset >
6532
6574
  0)
6533
6575
  {
6534
- active = i;
6535
- return true;
6576
+ break;
6536
6577
  }
6537
- });
6578
+ active = +i;
6579
+ }
6538
6580
 
6539
6581
  if (active === false && this.overflow) {
6540
6582
  active = 0;
@@ -6548,8 +6590,9 @@
6548
6590
  const changed = active !== false && !hasClass(this.elements[active], this.cls);
6549
6591
 
6550
6592
  this.links.forEach((el) => el.blur());
6551
- removeClass(this.elements, this.cls);
6552
- addClass(this.elements[active], this.cls);
6593
+ for (const i in this.elements) {
6594
+ toggleClass(this.elements[i], this.cls, +i === active);
6595
+ }
6553
6596
 
6554
6597
  if (changed) {
6555
6598
  trigger(this.$el, 'active', [active, this.elements[active]]);
@@ -6559,7 +6602,7 @@
6559
6602
  events: ['scroll', 'resize'] }] };
6560
6603
 
6561
6604
  var sticky = {
6562
- mixins: [Class, Media],
6605
+ mixins: [Class, Media, Resize],
6563
6606
 
6564
6607
  props: {
6565
6608
  position: String,
@@ -6602,6 +6645,10 @@
6602
6645
  return query(widthElement, $el) || this.placeholder;
6603
6646
  },
6604
6647
 
6648
+ resizeTargets() {
6649
+ return document.documentElement;
6650
+ },
6651
+
6605
6652
  isActive: {
6606
6653
  get() {
6607
6654
  return hasClass(this.selTarget, this.clsActive);
@@ -6713,7 +6760,6 @@
6713
6760
 
6714
6761
  const overflow = Math.max(0, height$1 + offset$1 - windowHeight);
6715
6762
  const topOffset = offset(referenceElement).top;
6716
- const offsetParentTop = offset(referenceElement.offsetParent).top;
6717
6763
 
6718
6764
  const top = parseProp(this.top, this.$el, topOffset);
6719
6765
  const bottom = parseProp(this.bottom, this.$el, topOffset + height$1, true);
@@ -6729,7 +6775,6 @@
6729
6775
  offset: offset$1,
6730
6776
  overflow,
6731
6777
  topOffset,
6732
- offsetParentTop,
6733
6778
  height: height$1,
6734
6779
  margin,
6735
6780
  width: dimensions$1(isVisible(this.widthElement) ? this.widthElement : this.$el).
@@ -6771,6 +6816,7 @@
6771
6816
  prevDir,
6772
6817
  scroll,
6773
6818
  prevScroll,
6819
+ offsetParentTop: offset(this.$el.offsetParent).top,
6774
6820
  overflowScroll: clamp(
6775
6821
  overflowScroll + clamp(scroll, start, end) - clamp(prevScroll, start, end),
6776
6822
  0,
@@ -7269,23 +7315,26 @@
7269
7315
  if (e.target === this.target[0]) {
7270
7316
  this.updateAria(toggled);
7271
7317
  }
7272
- } }],
7318
+ } },
7319
+
7273
7320
 
7321
+ {
7322
+ name: 'mediachange',
7274
7323
 
7324
+ filter() {
7325
+ return includes(this.mode, 'media');
7326
+ },
7275
7327
 
7276
- update: {
7277
- read() {
7278
- return includes(this.mode, 'media') && this.media ? { match: this.matchMedia } : false;
7328
+ el() {
7329
+ return this.target;
7279
7330
  },
7280
7331
 
7281
- write(_ref2) {let { match } = _ref2;
7282
- const toggled = this.isToggled(this.target);
7283
- if (match ? !toggled : toggled) {
7332
+ handler(e, mediaObj) {
7333
+ if (mediaObj.matches ^ this.isToggled(this.target)) {
7284
7334
  this.toggle();
7285
7335
  }
7286
- },
7336
+ } }],
7287
7337
 
7288
- events: ['resize'] },
7289
7338
 
7290
7339
 
7291
7340
  methods: {
@@ -7449,7 +7498,7 @@
7449
7498
  continue;
7450
7499
  }
7451
7500
 
7452
- let digits = String(Math.floor(timespan[unit]));
7501
+ let digits = String(Math.trunc(timespan[unit]));
7453
7502
 
7454
7503
  digits = digits.length < 2 ? "0" + digits : digits;
7455
7504
 
@@ -8437,7 +8486,7 @@
8437
8486
  } } };
8438
8487
 
8439
8488
  var Slider = {
8440
- mixins: [SliderAutoplay, SliderDrag, SliderNav],
8489
+ mixins: [SliderAutoplay, SliderDrag, SliderNav, Resize],
8441
8490
 
8442
8491
  props: {
8443
8492
  clsActivated: Boolean,
@@ -9061,8 +9110,8 @@
9061
9110
  return this.panel.show(index);
9062
9111
  },
9063
9112
 
9064
- hide() {
9065
- return this.panel && this.panel.hide();
9113
+ hide() {var _this$panel;
9114
+ return (_this$panel = this.panel) == null ? void 0 : _this$panel.hide();
9066
9115
  } } };
9067
9116
 
9068
9117
 
@@ -9544,7 +9593,7 @@
9544
9593
  }
9545
9594
 
9546
9595
  var parallax = {
9547
- mixins: [Parallax],
9596
+ mixins: [Parallax, Resize],
9548
9597
 
9549
9598
  props: {
9550
9599
  target: String,
@@ -9837,7 +9886,7 @@
9837
9886
  return (
9838
9887
  finite ||
9839
9888
  Math.ceil(getWidth(this.list)) <
9840
- Math.floor(dimensions$1(this.list).width + getMaxElWidth(this.list) + this.center));
9889
+ Math.trunc(dimensions$1(this.list).width + getMaxElWidth(this.list) + this.center));
9841
9890
 
9842
9891
  },
9843
9892
 
@@ -10081,11 +10130,13 @@
10081
10130
  selItem: '!li' },
10082
10131
 
10083
10132
 
10084
- computed: {
10085
- item(_ref, $el) {let { selItem } = _ref;
10086
- return query(selItem, $el);
10087
- } },
10133
+ connected() {
10134
+ this.item = query(this.selItem, this.$el);
10135
+ },
10088
10136
 
10137
+ disconnected() {
10138
+ this.item = null;
10139
+ },
10089
10140
 
10090
10141
  events: [
10091
10142
  {
@@ -10097,7 +10148,7 @@
10097
10148
  return this.item;
10098
10149
  },
10099
10150
 
10100
- handler(_ref2) {let { type, detail: { percent, duration, timing, dir } } = _ref2;
10151
+ handler(_ref) {let { type, detail: { percent, duration, timing, dir } } = _ref;
10101
10152
  fastdom.read(() => {
10102
10153
  const propsFrom = this.getCss(getCurrentPercent(type, dir, percent));
10103
10154
  const propsTo = this.getCss(isIn(type) ? 0.5 : dir > 0 ? 1 : 0);
@@ -10132,7 +10183,7 @@
10132
10183
  return this.item;
10133
10184
  },
10134
10185
 
10135
- handler(_ref3) {let { type, detail: { percent, dir } } = _ref3;
10186
+ handler(_ref2) {let { type, detail: { percent, dir } } = _ref2;
10136
10187
  fastdom.read(() => {
10137
10188
  const props = this.getCss(getCurrentPercent(type, dir, percent));
10138
10189
  fastdom.write(() => css(this.$el, props));