uikit 3.14.4-dev.871ba3c05 → 3.14.4-dev.cd89debeb

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 (53) hide show
  1. package/CHANGELOG.md +5 -0
  2. package/dist/css/uikit-core-rtl.css +7 -10
  3. package/dist/css/uikit-core-rtl.min.css +1 -1
  4. package/dist/css/uikit-core.css +7 -10
  5. package/dist/css/uikit-core.min.css +1 -1
  6. package/dist/css/uikit-rtl.css +7 -10
  7. package/dist/css/uikit-rtl.min.css +1 -1
  8. package/dist/css/uikit.css +7 -10
  9. package/dist/css/uikit.min.css +1 -1
  10. package/dist/js/components/countdown.js +1 -1
  11. package/dist/js/components/countdown.min.js +1 -1
  12. package/dist/js/components/filter.js +1 -1
  13. package/dist/js/components/filter.min.js +1 -1
  14. package/dist/js/components/lightbox-panel.js +89 -5
  15. package/dist/js/components/lightbox-panel.min.js +1 -1
  16. package/dist/js/components/lightbox.js +89 -5
  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 +1 -1
  21. package/dist/js/components/parallax.min.js +1 -1
  22. package/dist/js/components/slider-parallax.js +1 -1
  23. package/dist/js/components/slider-parallax.min.js +1 -1
  24. package/dist/js/components/slider.js +1 -1
  25. package/dist/js/components/slider.min.js +1 -1
  26. package/dist/js/components/slideshow-parallax.js +1 -1
  27. package/dist/js/components/slideshow-parallax.min.js +1 -1
  28. package/dist/js/components/slideshow.js +1 -1
  29. package/dist/js/components/slideshow.min.js +1 -1
  30. package/dist/js/components/sortable.js +1 -1
  31. package/dist/js/components/sortable.min.js +1 -1
  32. package/dist/js/components/tooltip.js +1 -1
  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 +482 -438
  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 +482 -438
  41. package/dist/js/uikit.min.js +1 -1
  42. package/package.json +1 -1
  43. package/src/js/core/drop.js +7 -0
  44. package/src/js/core/offcanvas.js +1 -47
  45. package/src/js/mixin/modal.js +90 -4
  46. package/src/less/components/navbar.less +9 -11
  47. package/src/less/theme/navbar.less +3 -1
  48. package/src/scss/components/navbar.scss +9 -11
  49. package/src/scss/theme/navbar.scss +3 -1
  50. package/src/scss/variables-theme.scss +2 -1
  51. package/src/scss/variables.scss +2 -1
  52. package/tests/drop.html +6 -0
  53. package/tests/navbar.html +4 -4
package/dist/js/uikit.js CHANGED
@@ -1,4 +1,4 @@
1
- /*! UIkit 3.14.4-dev.871ba3c05 | https://www.getuikit.com | (c) 2014 - 2022 YOOtheme | MIT License */
1
+ /*! UIkit 3.14.4-dev.cd89debeb | 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() :
@@ -2961,7 +2961,7 @@
2961
2961
  UIkit.data = '__uikit__';
2962
2962
  UIkit.prefix = 'uk-';
2963
2963
  UIkit.options = {};
2964
- UIkit.version = '3.14.4-dev.871ba3c05';
2964
+ UIkit.version = '3.14.4-dev.cd89debeb';
2965
2965
 
2966
2966
  globalAPI(UIkit);
2967
2967
  hooksAPI(UIkit);
@@ -3735,7 +3735,342 @@
3735
3735
  return toPx(getCssVar('position-viewport-offset', element));
3736
3736
  } } };
3737
3737
 
3738
- let active$1;
3738
+ const active$1 = [];
3739
+
3740
+ var Modal = {
3741
+ mixins: [Class, Container, Togglable],
3742
+
3743
+ props: {
3744
+ selPanel: String,
3745
+ selClose: String,
3746
+ escClose: Boolean,
3747
+ bgClose: Boolean,
3748
+ stack: Boolean },
3749
+
3750
+
3751
+ data: {
3752
+ cls: 'uk-open',
3753
+ escClose: true,
3754
+ bgClose: true,
3755
+ overlay: true,
3756
+ stack: false },
3757
+
3758
+
3759
+ computed: {
3760
+ panel(_ref, $el) {let { selPanel } = _ref;
3761
+ return $(selPanel, $el);
3762
+ },
3763
+
3764
+ transitionElement() {
3765
+ return this.panel;
3766
+ },
3767
+
3768
+ bgClose(_ref2) {let { bgClose } = _ref2;
3769
+ return bgClose && this.panel;
3770
+ } },
3771
+
3772
+
3773
+ beforeDisconnect() {
3774
+ if (includes(active$1, this)) {
3775
+ this.toggleElement(this.$el, false, false);
3776
+ }
3777
+ },
3778
+
3779
+ events: [
3780
+ {
3781
+ name: 'click',
3782
+
3783
+ delegate() {
3784
+ return this.selClose;
3785
+ },
3786
+
3787
+ handler(e) {
3788
+ e.preventDefault();
3789
+ this.hide();
3790
+ } },
3791
+
3792
+
3793
+ {
3794
+ name: 'toggle',
3795
+
3796
+ self: true,
3797
+
3798
+ handler(e) {
3799
+ if (e.defaultPrevented) {
3800
+ return;
3801
+ }
3802
+
3803
+ e.preventDefault();
3804
+
3805
+ if (this.isToggled() === includes(active$1, this)) {
3806
+ this.toggle();
3807
+ }
3808
+ } },
3809
+
3810
+
3811
+ {
3812
+ name: 'beforeshow',
3813
+
3814
+ self: true,
3815
+
3816
+ handler(e) {
3817
+ if (includes(active$1, this)) {
3818
+ return false;
3819
+ }
3820
+
3821
+ if (!this.stack && active$1.length) {
3822
+ Promise.all(active$1.map((modal) => modal.hide())).then(this.show);
3823
+ e.preventDefault();
3824
+ } else {
3825
+ active$1.push(this);
3826
+ }
3827
+ } },
3828
+
3829
+
3830
+ {
3831
+ name: 'show',
3832
+
3833
+ self: true,
3834
+
3835
+ handler() {
3836
+ once(
3837
+ this.$el,
3838
+ 'hide',
3839
+ on(document, 'focusin', (e) => {
3840
+ if (last(active$1) === this && !within(e.target, this.$el)) {
3841
+ this.$el.focus();
3842
+ }
3843
+ }));
3844
+
3845
+
3846
+ if (this.overlay) {
3847
+ once(this.$el, 'hide', preventOverscroll(this.$el));
3848
+ once(this.$el, 'hide', preventBackgroundScroll());
3849
+ }
3850
+
3851
+ if (this.stack) {
3852
+ css(this.$el, 'zIndex', toFloat(css(this.$el, 'zIndex')) + active$1.length);
3853
+ }
3854
+
3855
+ addClass(document.documentElement, this.clsPage);
3856
+
3857
+ if (this.bgClose) {
3858
+ once(
3859
+ this.$el,
3860
+ 'hide',
3861
+ on(document, pointerDown, (_ref3) => {let { target } = _ref3;
3862
+ if (
3863
+ last(active$1) !== this ||
3864
+ this.overlay && !within(target, this.$el) ||
3865
+ within(target, this.panel))
3866
+ {
3867
+ return;
3868
+ }
3869
+
3870
+ once(
3871
+ document,
3872
+ pointerUp + " " + pointerCancel + " scroll",
3873
+ (_ref4) => {let { defaultPrevented, type, target: newTarget } = _ref4;
3874
+ if (
3875
+ !defaultPrevented &&
3876
+ type === pointerUp &&
3877
+ target === newTarget)
3878
+ {
3879
+ this.hide();
3880
+ }
3881
+ },
3882
+ true);
3883
+
3884
+ }),
3885
+ { self: true });
3886
+
3887
+ }
3888
+
3889
+ if (this.escClose) {
3890
+ once(
3891
+ this.$el,
3892
+ 'hide',
3893
+ on(document, 'keydown', (e) => {
3894
+ if (e.keyCode === 27 && last(active$1) === this) {
3895
+ this.hide();
3896
+ }
3897
+ }),
3898
+ { self: true });
3899
+
3900
+ }
3901
+ } },
3902
+
3903
+
3904
+ {
3905
+ name: 'shown',
3906
+
3907
+ self: true,
3908
+
3909
+ handler() {
3910
+ if (!isFocusable(this.$el)) {
3911
+ attr(this.$el, 'tabindex', '-1');
3912
+ }
3913
+
3914
+ if (!$(':focus', this.$el)) {
3915
+ this.$el.focus();
3916
+ }
3917
+ } },
3918
+
3919
+
3920
+ {
3921
+ name: 'hidden',
3922
+
3923
+ self: true,
3924
+
3925
+ handler() {
3926
+ if (includes(active$1, this)) {
3927
+ active$1.splice(active$1.indexOf(this), 1);
3928
+ }
3929
+
3930
+ if (!active$1.length) {
3931
+ css(document.body, 'overflowY', '');
3932
+ }
3933
+
3934
+ css(this.$el, 'zIndex', '');
3935
+
3936
+ if (!active$1.some((modal) => modal.clsPage === this.clsPage)) {
3937
+ removeClass(document.documentElement, this.clsPage);
3938
+ }
3939
+ } }],
3940
+
3941
+
3942
+
3943
+ methods: {
3944
+ toggle() {
3945
+ return this.isToggled() ? this.hide() : this.show();
3946
+ },
3947
+
3948
+ show() {
3949
+ if (this.container && parent(this.$el) !== this.container) {
3950
+ append(this.container, this.$el);
3951
+ return new Promise((resolve) =>
3952
+ requestAnimationFrame(() => this.show().then(resolve)));
3953
+
3954
+ }
3955
+
3956
+ return this.toggleElement(this.$el, true, animate(this));
3957
+ },
3958
+
3959
+ hide() {
3960
+ return this.toggleElement(this.$el, false, animate(this));
3961
+ } } };
3962
+
3963
+
3964
+
3965
+ function animate(_ref5) {let { transitionElement, _toggle } = _ref5;
3966
+ return (el, show) =>
3967
+ new Promise((resolve, reject) =>
3968
+ once(el, 'show hide', () => {
3969
+ el._reject == null ? void 0 : el._reject();
3970
+ el._reject = reject;
3971
+
3972
+ _toggle(el, show);
3973
+
3974
+ const off = once(
3975
+ transitionElement,
3976
+ 'transitionstart',
3977
+ () => {
3978
+ once(transitionElement, 'transitionend transitioncancel', resolve, {
3979
+ self: true });
3980
+
3981
+ clearTimeout(timer);
3982
+ },
3983
+ { self: true });
3984
+
3985
+
3986
+ const timer = setTimeout(() => {
3987
+ off();
3988
+ resolve();
3989
+ }, toMs(css(transitionElement, 'transitionDuration')));
3990
+ })).
3991
+ then(() => delete el._reject);
3992
+ }
3993
+
3994
+ function toMs(time) {
3995
+ return time ? endsWith(time, 'ms') ? toFloat(time) : toFloat(time) * 1000 : 0;
3996
+ }
3997
+
3998
+ function preventOverscroll(el) {
3999
+ if (CSS.supports('overscroll-behavior', 'contain')) {
4000
+ const elements = filterChildren(el, (child) => /auto|scroll/.test(css(child, 'overflow')));
4001
+ css(elements, 'overscrollBehavior', 'contain');
4002
+ return () => css(elements, 'overscrollBehavior', '');
4003
+ }
4004
+
4005
+ let startClientY;
4006
+
4007
+ const events = [
4008
+ on(
4009
+ el,
4010
+ 'touchstart',
4011
+ (_ref6) => {let { targetTouches } = _ref6;
4012
+ if (targetTouches.length === 1) {
4013
+ startClientY = targetTouches[0].clientY;
4014
+ }
4015
+ },
4016
+ { passive: true }),
4017
+
4018
+
4019
+ on(
4020
+ el,
4021
+ 'touchmove',
4022
+ (e) => {
4023
+ if (e.targetTouches.length !== 1) {
4024
+ return;
4025
+ }
4026
+
4027
+ let [scrollParent] = scrollParents(e.target, /auto|scroll/);
4028
+ if (!within(scrollParent, el)) {
4029
+ scrollParent = el;
4030
+ }
4031
+
4032
+ const clientY = e.targetTouches[0].clientY - startClientY;
4033
+ const { scrollTop, scrollHeight, clientHeight } = scrollParent;
4034
+
4035
+ if (
4036
+ clientHeight >= scrollHeight ||
4037
+ scrollTop === 0 && clientY > 0 ||
4038
+ scrollHeight - scrollTop <= clientHeight && clientY < 0)
4039
+ {
4040
+ e.cancelable && e.preventDefault();
4041
+ }
4042
+ },
4043
+ { passive: false })];
4044
+
4045
+
4046
+
4047
+ return () => events.forEach((fn) => fn());
4048
+ }
4049
+
4050
+ function preventBackgroundScroll() {
4051
+ const { body, documentElement } = document;
4052
+ css(body, {
4053
+ overflowY: width(window) > documentElement.clientWidth ? 'scroll' : '',
4054
+ touchAction: 'none' });
4055
+
4056
+ css(documentElement, 'overflowY', 'hidden');
4057
+ return () => {
4058
+ css(documentElement, 'overflowY', '');
4059
+ css(body, { overflowY: '', touchAction: '' });
4060
+ };
4061
+ }
4062
+
4063
+ function filterChildren(el, fn) {
4064
+ const children = [];
4065
+ apply(el, (node) => {
4066
+ if (fn(node)) {
4067
+ children.push(node);
4068
+ }
4069
+ });
4070
+ return children;
4071
+ }
4072
+
4073
+ let active;
3739
4074
 
3740
4075
  var drop = {
3741
4076
  mixins: [Container, Lazyload, Position, Togglable],
@@ -3751,7 +4086,8 @@
3751
4086
  delayHide: Number,
3752
4087
  display: String,
3753
4088
  clsDrop: String,
3754
- animateOut: Boolean },
4089
+ animateOut: Boolean,
4090
+ bgScroll: Boolean },
3755
4091
 
3756
4092
 
3757
4093
  data: {
@@ -3766,7 +4102,8 @@
3766
4102
  animation: ['uk-animation-fade'],
3767
4103
  cls: 'uk-open',
3768
4104
  container: false,
3769
- animateOut: false },
4105
+ animateOut: false,
4106
+ bgScroll: true },
3770
4107
 
3771
4108
 
3772
4109
  created() {
@@ -3792,7 +4129,7 @@
3792
4129
 
3793
4130
  disconnected() {
3794
4131
  if (this.isActive()) {
3795
- active$1 = null;
4132
+ active = null;
3796
4133
  }
3797
4134
  },
3798
4135
 
@@ -3921,7 +4258,7 @@
3921
4258
  self: true,
3922
4259
 
3923
4260
  handler() {
3924
- active$1 = this;
4261
+ active = this;
3925
4262
 
3926
4263
  this.tracker.init();
3927
4264
 
@@ -3954,6 +4291,10 @@
3954
4291
  }
3955
4292
  }),
3956
4293
 
4294
+ ...(this.bgScroll ?
4295
+ [] :
4296
+ [preventOverscroll(this.$el), preventBackgroundScroll()]),
4297
+
3957
4298
  ...(this.display === 'static' && this.align !== 'stretch' ?
3958
4299
  [] :
3959
4300
  (() => {
@@ -3991,14 +4332,14 @@
3991
4332
 
3992
4333
  handler(_ref4) {let { target } = _ref4;
3993
4334
  if (this.$el !== target) {
3994
- active$1 =
3995
- active$1 === null && within(target, this.$el) && this.isToggled() ?
4335
+ active =
4336
+ active === null && within(target, this.$el) && this.isToggled() ?
3996
4337
  this :
3997
- active$1;
4338
+ active;
3998
4339
  return;
3999
4340
  }
4000
4341
 
4001
- active$1 = this.isActive() ? null : active$1;
4342
+ active = this.isActive() ? null : active;
4002
4343
  this.tracker.cancel();
4003
4344
  } }],
4004
4345
 
@@ -4026,16 +4367,16 @@
4026
4367
  return;
4027
4368
  }
4028
4369
 
4029
- if (active$1) {
4030
- if (delay && active$1.isDelaying) {
4370
+ if (active) {
4371
+ if (delay && active.isDelaying) {
4031
4372
  this.showTimer = setTimeout(() => matches(target, ':hover') && this.show(), 10);
4032
4373
  return;
4033
4374
  }
4034
4375
 
4035
4376
  let prev;
4036
- while (active$1 && prev !== active$1 && !within(this.$el, active$1.$el)) {
4037
- prev = active$1;
4038
- active$1.hide(false, false);
4377
+ while (active && prev !== active && !within(this.$el, active.$el)) {
4378
+ prev = active;
4379
+ active.hide(false, false);
4039
4380
  }
4040
4381
  }
4041
4382
 
@@ -4076,7 +4417,7 @@
4076
4417
  },
4077
4418
 
4078
4419
  isActive() {
4079
- return active$1 === this;
4420
+ return active === this;
4080
4421
  },
4081
4422
 
4082
4423
  position() {
@@ -5163,414 +5504,163 @@
5163
5504
  function setSourceProps(sourceEl, targetEl) {
5164
5505
  srcProps.forEach((prop) => {
5165
5506
  const value = data(sourceEl, prop);
5166
- if (value) {
5167
- attr(targetEl, prop.replace(/^(data-)+/, ''), value);
5168
- }
5169
- });
5170
- }
5171
-
5172
- function getImageFromElement(el, src, sources) {
5173
- const img = new Image();
5174
-
5175
- wrapInPicture(img, sources);
5176
- setSourceProps(el, img);
5177
- img.onload = () => {
5178
- setSrcAttrs(el, img.currentSrc);
5179
- };
5180
- attr(img, 'src', src);
5181
- return img;
5182
- }
5183
-
5184
- function wrapInPicture(img, sources) {
5185
- sources = parseSources(sources);
5186
-
5187
- if (sources.length) {
5188
- const picture = fragment('<picture>');
5189
- for (const attrs of sources) {
5190
- const source = fragment('<source>');
5191
- attr(source, attrs);
5192
- append(picture, source);
5193
- }
5194
- append(picture, img);
5195
- }
5196
- }
5197
-
5198
- function parseSources(sources) {
5199
- if (!sources) {
5200
- return [];
5201
- }
5202
-
5203
- if (startsWith(sources, '[')) {
5204
- try {
5205
- sources = JSON.parse(sources);
5206
- } catch (e) {
5207
- sources = [];
5208
- }
5209
- } else {
5210
- sources = parseOptions(sources);
5211
- }
5212
-
5213
- if (!isArray(sources)) {
5214
- sources = [sources];
5215
- }
5216
-
5217
- return sources.filter((source) => !isEmpty(source));
5218
- }
5219
-
5220
- function ensureSrcAttribute(el) {
5221
- if (isImg(el) && !hasAttr(el, 'src')) {
5222
- attr(el, 'src', 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"></svg>');
5223
- }
5224
- }
5225
-
5226
- function isPicture(el) {
5227
- return isTag(el, 'picture');
5228
- }
5229
-
5230
- function isImg(el) {
5231
- return isTag(el, 'img');
5232
- }
5233
-
5234
- var Media = {
5235
- props: {
5236
- media: Boolean },
5237
-
5238
-
5239
- data: {
5240
- media: false },
5241
-
5242
-
5243
- connected() {
5244
- const media = toMedia(this.media);
5245
- this.matchMedia = true;
5246
- if (media) {
5247
- this.mediaObj = window.matchMedia(media);
5248
- const handler = () => {
5249
- this.matchMedia = this.mediaObj.matches;
5250
- trigger(this.$el, createEvent('mediachange', false, true, [this.mediaObj]));
5251
- };
5252
- this.offMediaObj = on(this.mediaObj, 'change', () => {
5253
- handler();
5254
- this.$emit('resize');
5255
- });
5256
- handler();
5257
- }
5258
- },
5259
-
5260
- disconnected() {var _this$offMediaObj;
5261
- (_this$offMediaObj = this.offMediaObj) == null ? void 0 : _this$offMediaObj.call(this);
5262
- } };
5263
-
5264
-
5265
- function toMedia(value) {
5266
- if (isString(value)) {
5267
- if (startsWith(value, '@')) {
5268
- const name = "breakpoint-" + value.substr(1);
5269
- value = toFloat(getCssVar(name));
5270
- } else if (isNaN(value)) {
5271
- return value;
5272
- }
5273
- }
5274
-
5275
- return value && isNumeric(value) ? "(min-width: " + value + "px)" : '';
5276
- }
5277
-
5278
- var leader = {
5279
- mixins: [Class, Media, Resize],
5280
-
5281
- props: {
5282
- fill: String },
5283
-
5284
-
5285
- data: {
5286
- fill: '',
5287
- clsWrapper: 'uk-leader-fill',
5288
- clsHide: 'uk-leader-hide',
5289
- attrFill: 'data-fill' },
5290
-
5291
-
5292
- computed: {
5293
- fill(_ref) {let { fill } = _ref;
5294
- return fill || getCssVar('leader-fill-content');
5295
- } },
5296
-
5297
-
5298
- connected() {
5299
- [this.wrapper] = wrapInner(this.$el, "<span class=\"" + this.clsWrapper + "\">");
5300
- },
5301
-
5302
- disconnected() {
5303
- unwrap(this.wrapper.childNodes);
5304
- },
5305
-
5306
- update: {
5307
- read() {
5308
- const width = Math.trunc(this.$el.offsetWidth / 2);
5309
-
5310
- return {
5311
- width,
5312
- fill: this.fill,
5313
- hide: !this.matchMedia };
5314
-
5315
- },
5316
-
5317
- write(_ref2) {let { width, fill, hide } = _ref2;
5318
- toggleClass(this.wrapper, this.clsHide, hide);
5319
- attr(this.wrapper, this.attrFill, new Array(width).join(fill));
5320
- },
5321
-
5322
- events: ['resize'] } };
5323
-
5324
- const active = [];
5325
-
5326
- var Modal = {
5327
- mixins: [Class, Container, Togglable],
5328
-
5329
- props: {
5330
- selPanel: String,
5331
- selClose: String,
5332
- escClose: Boolean,
5333
- bgClose: Boolean,
5334
- stack: Boolean },
5335
-
5336
-
5337
- data: {
5338
- cls: 'uk-open',
5339
- escClose: true,
5340
- bgClose: true,
5341
- overlay: true,
5342
- stack: false },
5343
-
5344
-
5345
- computed: {
5346
- panel(_ref, $el) {let { selPanel } = _ref;
5347
- return $(selPanel, $el);
5348
- },
5349
-
5350
- transitionElement() {
5351
- return this.panel;
5352
- },
5353
-
5354
- bgClose(_ref2) {let { bgClose } = _ref2;
5355
- return bgClose && this.panel;
5356
- } },
5357
-
5358
-
5359
- beforeDisconnect() {
5360
- if (includes(active, this)) {
5361
- this.toggleElement(this.$el, false, false);
5362
- }
5363
- },
5364
-
5365
- events: [
5366
- {
5367
- name: 'click',
5368
-
5369
- delegate() {
5370
- return this.selClose;
5371
- },
5372
-
5373
- handler(e) {
5374
- e.preventDefault();
5375
- this.hide();
5376
- } },
5377
-
5378
-
5379
- {
5380
- name: 'toggle',
5381
-
5382
- self: true,
5383
-
5384
- handler(e) {
5385
- if (e.defaultPrevented) {
5386
- return;
5387
- }
5388
-
5389
- e.preventDefault();
5390
-
5391
- if (this.isToggled() === includes(active, this)) {
5392
- this.toggle();
5393
- }
5394
- } },
5395
-
5396
-
5397
- {
5398
- name: 'beforeshow',
5399
-
5400
- self: true,
5401
-
5402
- handler(e) {
5403
- if (includes(active, this)) {
5404
- return false;
5405
- }
5406
-
5407
- if (!this.stack && active.length) {
5408
- Promise.all(active.map((modal) => modal.hide())).then(this.show);
5409
- e.preventDefault();
5410
- } else {
5411
- active.push(this);
5412
- }
5413
- } },
5414
-
5415
-
5416
- {
5417
- name: 'show',
5418
-
5419
- self: true,
5420
-
5421
- handler() {
5422
- const docEl = document.documentElement;
5423
-
5424
- if (width(window) > docEl.clientWidth && this.overlay) {
5425
- css(document.body, 'overflowY', 'scroll');
5426
- }
5427
-
5428
- if (this.stack) {
5429
- css(this.$el, 'zIndex', toFloat(css(this.$el, 'zIndex')) + active.length);
5430
- }
5507
+ if (value) {
5508
+ attr(targetEl, prop.replace(/^(data-)+/, ''), value);
5509
+ }
5510
+ });
5511
+ }
5431
5512
 
5432
- addClass(docEl, this.clsPage);
5513
+ function getImageFromElement(el, src, sources) {
5514
+ const img = new Image();
5433
5515
 
5434
- if (this.bgClose) {
5435
- once(
5436
- this.$el,
5437
- 'hide',
5438
- on(document, pointerDown, (_ref3) => {let { target } = _ref3;
5439
- if (
5440
- last(active) !== this ||
5441
- this.overlay && !within(target, this.$el) ||
5442
- within(target, this.panel))
5443
- {
5444
- return;
5445
- }
5516
+ wrapInPicture(img, sources);
5517
+ setSourceProps(el, img);
5518
+ img.onload = () => {
5519
+ setSrcAttrs(el, img.currentSrc);
5520
+ };
5521
+ attr(img, 'src', src);
5522
+ return img;
5523
+ }
5446
5524
 
5447
- once(
5448
- document,
5449
- pointerUp + " " + pointerCancel + " scroll",
5450
- (_ref4) => {let { defaultPrevented, type, target: newTarget } = _ref4;
5451
- if (
5452
- !defaultPrevented &&
5453
- type === pointerUp &&
5454
- target === newTarget)
5455
- {
5456
- this.hide();
5457
- }
5458
- },
5459
- true);
5525
+ function wrapInPicture(img, sources) {
5526
+ sources = parseSources(sources);
5460
5527
 
5461
- }),
5462
- { self: true });
5528
+ if (sources.length) {
5529
+ const picture = fragment('<picture>');
5530
+ for (const attrs of sources) {
5531
+ const source = fragment('<source>');
5532
+ attr(source, attrs);
5533
+ append(picture, source);
5534
+ }
5535
+ append(picture, img);
5536
+ }
5537
+ }
5463
5538
 
5464
- }
5539
+ function parseSources(sources) {
5540
+ if (!sources) {
5541
+ return [];
5542
+ }
5465
5543
 
5466
- if (this.escClose) {
5467
- once(
5468
- this.$el,
5469
- 'hide',
5470
- on(document, 'keydown', (e) => {
5471
- if (e.keyCode === 27 && last(active) === this) {
5472
- this.hide();
5473
- }
5474
- }),
5475
- { self: true });
5544
+ if (startsWith(sources, '[')) {
5545
+ try {
5546
+ sources = JSON.parse(sources);
5547
+ } catch (e) {
5548
+ sources = [];
5549
+ }
5550
+ } else {
5551
+ sources = parseOptions(sources);
5552
+ }
5476
5553
 
5477
- }
5478
- } },
5554
+ if (!isArray(sources)) {
5555
+ sources = [sources];
5556
+ }
5479
5557
 
5558
+ return sources.filter((source) => !isEmpty(source));
5559
+ }
5480
5560
 
5481
- {
5482
- name: 'shown',
5561
+ function ensureSrcAttribute(el) {
5562
+ if (isImg(el) && !hasAttr(el, 'src')) {
5563
+ attr(el, 'src', 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"></svg>');
5564
+ }
5565
+ }
5483
5566
 
5484
- self: true,
5567
+ function isPicture(el) {
5568
+ return isTag(el, 'picture');
5569
+ }
5485
5570
 
5486
- handler() {
5487
- if (!isFocusable(this.$el)) {
5488
- attr(this.$el, 'tabindex', '-1');
5489
- }
5571
+ function isImg(el) {
5572
+ return isTag(el, 'img');
5573
+ }
5490
5574
 
5491
- if (!$(':focus', this.$el)) {
5492
- this.$el.focus();
5493
- }
5494
- } },
5575
+ var Media = {
5576
+ props: {
5577
+ media: Boolean },
5495
5578
 
5496
5579
 
5497
- {
5498
- name: 'hidden',
5580
+ data: {
5581
+ media: false },
5499
5582
 
5500
- self: true,
5501
5583
 
5502
- handler() {
5503
- if (includes(active, this)) {
5504
- active.splice(active.indexOf(this), 1);
5505
- }
5584
+ connected() {
5585
+ const media = toMedia(this.media);
5586
+ this.matchMedia = true;
5587
+ if (media) {
5588
+ this.mediaObj = window.matchMedia(media);
5589
+ const handler = () => {
5590
+ this.matchMedia = this.mediaObj.matches;
5591
+ trigger(this.$el, createEvent('mediachange', false, true, [this.mediaObj]));
5592
+ };
5593
+ this.offMediaObj = on(this.mediaObj, 'change', () => {
5594
+ handler();
5595
+ this.$emit('resize');
5596
+ });
5597
+ handler();
5598
+ }
5599
+ },
5506
5600
 
5507
- if (!active.length) {
5508
- css(document.body, 'overflowY', '');
5509
- }
5601
+ disconnected() {var _this$offMediaObj;
5602
+ (_this$offMediaObj = this.offMediaObj) == null ? void 0 : _this$offMediaObj.call(this);
5603
+ } };
5510
5604
 
5511
- css(this.$el, 'zIndex', '');
5512
5605
 
5513
- if (!active.some((modal) => modal.clsPage === this.clsPage)) {
5514
- removeClass(document.documentElement, this.clsPage);
5515
- }
5516
- } }],
5606
+ function toMedia(value) {
5607
+ if (isString(value)) {
5608
+ if (startsWith(value, '@')) {
5609
+ const name = "breakpoint-" + value.substr(1);
5610
+ value = toFloat(getCssVar(name));
5611
+ } else if (isNaN(value)) {
5612
+ return value;
5613
+ }
5614
+ }
5517
5615
 
5616
+ return value && isNumeric(value) ? "(min-width: " + value + "px)" : '';
5617
+ }
5518
5618
 
5619
+ var leader = {
5620
+ mixins: [Class, Media, Resize],
5519
5621
 
5520
- methods: {
5521
- toggle() {
5522
- return this.isToggled() ? this.hide() : this.show();
5523
- },
5622
+ props: {
5623
+ fill: String },
5524
5624
 
5525
- show() {
5526
- if (this.container && parent(this.$el) !== this.container) {
5527
- append(this.container, this.$el);
5528
- return new Promise((resolve) =>
5529
- requestAnimationFrame(() => this.show().then(resolve)));
5530
5625
 
5531
- }
5626
+ data: {
5627
+ fill: '',
5628
+ clsWrapper: 'uk-leader-fill',
5629
+ clsHide: 'uk-leader-hide',
5630
+ attrFill: 'data-fill' },
5532
5631
 
5533
- return this.toggleElement(this.$el, true, animate(this));
5534
- },
5535
5632
 
5536
- hide() {
5537
- return this.toggleElement(this.$el, false, animate(this));
5538
- } } };
5633
+ computed: {
5634
+ fill(_ref) {let { fill } = _ref;
5635
+ return fill || getCssVar('leader-fill-content');
5636
+ } },
5539
5637
 
5540
5638
 
5639
+ connected() {
5640
+ [this.wrapper] = wrapInner(this.$el, "<span class=\"" + this.clsWrapper + "\">");
5641
+ },
5541
5642
 
5542
- function animate(_ref5) {let { transitionElement, _toggle } = _ref5;
5543
- return (el, show) =>
5544
- new Promise((resolve, reject) =>
5545
- once(el, 'show hide', () => {
5546
- el._reject == null ? void 0 : el._reject();
5547
- el._reject = reject;
5643
+ disconnected() {
5644
+ unwrap(this.wrapper.childNodes);
5645
+ },
5548
5646
 
5549
- _toggle(el, show);
5647
+ update: {
5648
+ read() {
5649
+ const width = Math.trunc(this.$el.offsetWidth / 2);
5550
5650
 
5551
- const off = once(
5552
- transitionElement,
5553
- 'transitionstart',
5554
- () => {
5555
- once(transitionElement, 'transitionend transitioncancel', resolve, {
5556
- self: true });
5651
+ return {
5652
+ width,
5653
+ fill: this.fill,
5654
+ hide: !this.matchMedia };
5557
5655
 
5558
- clearTimeout(timer);
5559
5656
  },
5560
- { self: true });
5561
-
5562
5657
 
5563
- const timer = setTimeout(() => {
5564
- off();
5565
- resolve();
5566
- }, toMs(css(transitionElement, 'transitionDuration')));
5567
- })).
5568
- then(() => delete el._reject);
5569
- }
5658
+ write(_ref2) {let { width, fill, hide } = _ref2;
5659
+ toggleClass(this.wrapper, this.clsHide, hide);
5660
+ attr(this.wrapper, this.attrFill, new Array(width).join(fill));
5661
+ },
5570
5662
 
5571
- function toMs(time) {
5572
- return time ? endsWith(time, 'ms') ? toFloat(time) : toFloat(time) * 1000 : 0;
5573
- }
5663
+ events: ['resize'] } };
5574
5664
 
5575
5665
  var modal = {
5576
5666
  install: install$2,
@@ -6076,7 +6166,7 @@
6076
6166
 
6077
6167
  methods: {
6078
6168
  getActive() {
6079
- return active$1 && within(active$1.target, this.$el) && active$1;
6169
+ return active && within(active.target, this.$el) && active;
6080
6170
  },
6081
6171
 
6082
6172
  transitionTo(newHeight, el) {
@@ -6286,22 +6376,6 @@
6286
6376
  } },
6287
6377
 
6288
6378
 
6289
- {
6290
- name: 'touchstart',
6291
-
6292
- passive: true,
6293
-
6294
- el() {
6295
- return this.panel;
6296
- },
6297
-
6298
- handler(_ref8) {let { targetTouches } = _ref8;
6299
- if (targetTouches.length === 1) {
6300
- this.clientY = targetTouches[0].clientY;
6301
- }
6302
- } },
6303
-
6304
-
6305
6379
  {
6306
6380
  name: 'touchmove',
6307
6381
 
@@ -6317,33 +6391,6 @@
6317
6391
  } },
6318
6392
 
6319
6393
 
6320
- {
6321
- name: 'touchmove',
6322
-
6323
- passive: false,
6324
-
6325
- el() {
6326
- return this.panel;
6327
- },
6328
-
6329
- handler(e) {
6330
- if (e.targetTouches.length !== 1) {
6331
- return;
6332
- }
6333
-
6334
- const clientY = e.targetTouches[0].clientY - this.clientY;
6335
- const { scrollTop, scrollHeight, clientHeight } = this.panel;
6336
-
6337
- if (
6338
- clientHeight >= scrollHeight ||
6339
- scrollTop === 0 && clientY > 0 ||
6340
- scrollHeight - scrollTop <= clientHeight && clientY < 0)
6341
- {
6342
- e.cancelable && e.preventDefault();
6343
- }
6344
- } },
6345
-
6346
-
6347
6394
  {
6348
6395
  name: 'show',
6349
6396
 
@@ -6355,7 +6402,6 @@
6355
6402
  addClass(parent(this.panel), this.clsMode);
6356
6403
  }
6357
6404
 
6358
- css(document.documentElement, 'overflowY', this.overlay ? 'hidden' : '');
6359
6405
  addClass(document.body, this.clsContainer, this.clsFlip);
6360
6406
  css(document.body, 'touch-action', 'pan-y pinch-zoom');
6361
6407
  css(this.$el, 'display', 'block');
@@ -6363,7 +6409,7 @@
6363
6409
  addClass(
6364
6410
  this.panel,
6365
6411
  this.clsSidebarAnimation,
6366
- this.mode !== 'reveal' ? this.clsMode : '');
6412
+ this.mode === 'reveal' ? '' : this.clsMode);
6367
6413
 
6368
6414
 
6369
6415
  height(document.body); // force reflow
@@ -6400,8 +6446,6 @@
6400
6446
  removeClass(this.$el, this.clsOverlay);
6401
6447
  css(this.$el, 'display', '');
6402
6448
  removeClass(document.body, this.clsContainer, this.clsFlip);
6403
-
6404
- css(document.documentElement, 'overflowY', '');
6405
6449
  } },
6406
6450
 
6407
6451