uikit 3.13.6-dev.f130508b6 → 3.13.7-dev.120e5ee9c

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 (61) hide show
  1. package/CHANGELOG.md +15 -4
  2. package/build/util.js +1 -1
  3. package/dist/css/uikit-core-rtl.css +7 -12
  4. package/dist/css/uikit-core-rtl.min.css +1 -1
  5. package/dist/css/uikit-core.css +7 -12
  6. package/dist/css/uikit-core.min.css +1 -1
  7. package/dist/css/uikit-rtl.css +7 -12
  8. package/dist/css/uikit-rtl.min.css +1 -1
  9. package/dist/css/uikit.css +7 -12
  10. package/dist/css/uikit.min.css +1 -1
  11. package/dist/js/components/countdown.js +1 -1
  12. package/dist/js/components/countdown.min.js +1 -1
  13. package/dist/js/components/filter.js +1 -1
  14. package/dist/js/components/filter.min.js +1 -1
  15. package/dist/js/components/lightbox-panel.js +1 -1
  16. package/dist/js/components/lightbox-panel.min.js +1 -1
  17. package/dist/js/components/lightbox.js +1 -1
  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 +1 -1
  22. package/dist/js/components/parallax.min.js +1 -1
  23. package/dist/js/components/slider-parallax.js +2 -2
  24. package/dist/js/components/slider-parallax.min.js +1 -1
  25. package/dist/js/components/slider.js +1 -1
  26. package/dist/js/components/slider.min.js +1 -1
  27. package/dist/js/components/slideshow-parallax.js +2 -2
  28. package/dist/js/components/slideshow-parallax.min.js +1 -1
  29. package/dist/js/components/slideshow.js +1 -1
  30. package/dist/js/components/slideshow.min.js +1 -1
  31. package/dist/js/components/sortable.js +1 -1
  32. package/dist/js/components/sortable.min.js +1 -1
  33. package/dist/js/components/tooltip.js +19 -53
  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 +146 -228
  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 +146 -228
  42. package/dist/js/uikit.min.js +1 -1
  43. package/package.json +1 -1
  44. package/src/js/components/slider-parallax.js +1 -1
  45. package/src/js/core/drop.js +1 -1
  46. package/src/js/core/height-match.js +3 -0
  47. package/src/js/core/height-viewport.js +4 -2
  48. package/src/js/core/img.js +0 -57
  49. package/src/js/mixin/position.js +16 -49
  50. package/src/js/util/position.js +129 -125
  51. package/src/less/components/drop.less +1 -1
  52. package/src/less/components/dropdown.less +1 -1
  53. package/src/less/components/nav.less +1 -5
  54. package/src/less/components/navbar.less +2 -2
  55. package/src/less/components/tooltip.less +1 -1
  56. package/src/scss/components/drop.scss +1 -1
  57. package/src/scss/components/dropdown.scss +1 -1
  58. package/src/scss/components/nav.scss +1 -5
  59. package/src/scss/components/navbar.scss +2 -2
  60. package/src/scss/components/tooltip.scss +1 -1
  61. package/tests/position.html +39 -38
@@ -1,4 +1,4 @@
1
- /*! UIkit 3.13.6-dev.f130508b6 | https://www.getuikit.com | (c) 2014 - 2022 YOOtheme | MIT License */
1
+ /*! UIkit 3.13.7-dev.120e5ee9c | 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() :
@@ -1933,153 +1933,157 @@
1933
1933
  return document.scrollingElement || document.documentElement;
1934
1934
  }
1935
1935
 
1936
- const dirs = [
1937
- ['width', 'x', 'left', 'right'],
1938
- ['height', 'y', 'top', 'bottom']];
1936
+ const dirs = {
1937
+ width: ['x', 'left', 'right'],
1938
+ height: ['y', 'top', 'bottom'] };
1939
1939
 
1940
1940
 
1941
- function positionAt(element, target, options) {
1942
- options = {
1943
- attach: {
1944
- element: ['left', 'top'],
1945
- target: ['left', 'top'],
1946
- ...options.attach },
1941
+ function positionAt(
1942
+ element,
1943
+ target,
1944
+ elAttach,
1945
+ targetAttach,
1946
+ elOffset,
1947
+ targetOffset,
1948
+ flip,
1949
+ boundary)
1950
+ {
1951
+ elAttach = getPos(elAttach);
1952
+ targetAttach = getPos(targetAttach);
1947
1953
 
1948
- offset: [0, 0],
1949
- ...options };
1954
+ const flipped = { element: elAttach, target: targetAttach };
1950
1955
 
1956
+ if (!element || !target) {
1957
+ return flipped;
1958
+ }
1951
1959
 
1952
- const dim = options.flip ?
1953
- attachToWithFlip(element, target, options) :
1954
- attachTo(element, target, options);
1960
+ const dim = offset(element);
1961
+ const targetDim = offset(target);
1962
+ const position = targetDim;
1955
1963
 
1956
- offset(element, dim);
1957
- }
1964
+ moveTo(position, elAttach, dim, -1);
1965
+ moveTo(position, targetAttach, targetDim, 1);
1958
1966
 
1959
- function attachTo(element, target, options) {
1960
- let { attach, offset: offsetBy } = {
1961
- attach: {
1962
- element: ['left', 'top'],
1963
- target: ['left', 'top'],
1964
- ...options.attach },
1967
+ elOffset = getOffsets(elOffset, dim.width, dim.height);
1968
+ targetOffset = getOffsets(targetOffset, targetDim.width, targetDim.height);
1965
1969
 
1966
- offset: [0, 0],
1967
- ...options };
1970
+ elOffset['x'] += targetOffset['x'];
1971
+ elOffset['y'] += targetOffset['y'];
1968
1972
 
1973
+ position.left += elOffset['x'];
1974
+ position.top += elOffset['y'];
1969
1975
 
1970
- const position = offset(element);
1971
- const targetOffset = offset(target);
1972
- for (const i in dirs) {
1973
- const [prop, dir, start, end] = dirs[i];
1974
- position[start] = position[dir] =
1975
- targetOffset[start] +
1976
- moveBy(attach.target[i], end, targetOffset[prop]) -
1977
- moveBy(attach.element[i], end, position[prop]) +
1978
- +offsetBy[i];
1979
- position[end] = position[start] + position[prop];
1980
- }
1981
- return position;
1982
- }
1976
+ if (flip) {
1977
+ let boundaries = scrollParents(element).map(getViewport$1);
1983
1978
 
1984
- function attachToWithFlip(element, target, options) {
1985
- const position = attachTo(element, target, options);
1986
- const targetDim = offset(target);
1987
- const viewports = scrollParents(element).map(getViewport$1);
1979
+ if (boundary && !includes(boundaries, boundary)) {
1980
+ boundaries.unshift(boundary);
1981
+ }
1988
1982
 
1989
- let {
1990
- flip,
1991
- attach: { element: elAttach, target: targetAttach },
1992
- offset: elOffset,
1993
- boundary,
1994
- viewport } =
1995
- options;
1983
+ boundaries = boundaries.map((el) => offset(el));
1996
1984
 
1997
- viewports.push(viewport);
1985
+ each(dirs, (_ref, prop) => {let [dir, align, alignFlip] = _ref;
1986
+ if (!(flip === true || includes(flip, dir))) {
1987
+ return;
1988
+ }
1998
1989
 
1999
- for (const i in dirs) {
2000
- const [prop, dir, start, end] = dirs[i];
1990
+ boundaries.some((boundary) => {
1991
+ const elemOffset =
1992
+ elAttach[dir] === align ?
1993
+ -dim[prop] :
1994
+ elAttach[dir] === alignFlip ?
1995
+ dim[prop] :
1996
+ 0;
2001
1997
 
2002
- if (flip !== true && !includes(flip, dir)) {
2003
- continue;
2004
- }
1998
+ const targetOffset =
1999
+ targetAttach[dir] === align ?
2000
+ targetDim[prop] :
2001
+ targetAttach[dir] === alignFlip ?
2002
+ -targetDim[prop] :
2003
+ 0;
2005
2004
 
2006
- const willFlip =
2007
- !intersectLine(position, targetDim, i) && intersectLine(position, targetDim, 1 - i);
2005
+ if (
2006
+ position[align] < boundary[align] ||
2007
+ position[align] + dim[prop] > boundary[alignFlip])
2008
+ {
2009
+ const centerOffset = dim[prop] / 2;
2010
+ const centerTargetOffset =
2011
+ targetAttach[dir] === 'center' ? -targetDim[prop] / 2 : 0;
2008
2012
 
2009
- viewport = getIntersectionArea(...viewports, willFlip ? null : boundary);
2010
- const isInStartBoundary = position[start] >= viewport[start];
2011
- const isInEndBoundary = position[end] <= viewport[end];
2013
+ return (
2014
+ elAttach[dir] === 'center' && (
2015
+ apply(centerOffset, centerTargetOffset) ||
2016
+ apply(-centerOffset, -centerTargetOffset)) ||
2017
+ apply(elemOffset, targetOffset));
2012
2018
 
2013
- if (isInStartBoundary && isInEndBoundary) {
2014
- continue;
2015
- }
2019
+ }
2016
2020
 
2017
- let offsetBy;
2021
+ function apply(elemOffset, targetOffset) {
2022
+ const newVal = toFloat(
2023
+ (position[align] + elemOffset + targetOffset - elOffset[dir] * 2).toFixed(4));
2018
2024
 
2019
- // Flip
2020
- if (willFlip) {
2021
- if (
2022
- elAttach[i] === end && isInStartBoundary ||
2023
- elAttach[i] === start && isInEndBoundary)
2024
- {
2025
- continue;
2026
- }
2027
2025
 
2028
- offsetBy =
2029
- (elAttach[i] === start ?
2030
- -position[prop] :
2031
- elAttach[i] === end ?
2032
- position[prop] :
2033
- 0) + (
2034
- targetAttach[i] === start ?
2035
- targetDim[prop] :
2036
- targetAttach[i] === end ?
2037
- -targetDim[prop] :
2038
- 0) -
2039
- elOffset[i] * 2;
2040
-
2041
- // Move
2042
- } else {
2043
- offsetBy =
2044
- clamp(
2045
- clamp(position[start], viewport[start], viewport[end] - position[prop]),
2046
- targetDim[start] - position[prop] + elOffset[i],
2047
- targetDim[end] - elOffset[i]) -
2048
- position[start];
2049
- }
2026
+ if (newVal >= boundary[align] && newVal + dim[prop] <= boundary[alignFlip]) {
2027
+ position[align] = newVal;
2028
+
2029
+ for (const el of ['element', 'target']) {
2030
+ if (elemOffset) {
2031
+ flipped[el][dir] =
2032
+ flipped[el][dir] === dirs[prop][1] ?
2033
+ dirs[prop][2] :
2034
+ dirs[prop][1];
2035
+ }
2036
+ }
2050
2037
 
2051
- position[start] = position[dir] = position[start] + offsetBy;
2052
- position[end] += offsetBy;
2038
+ return true;
2039
+ }
2040
+ }
2041
+ });
2042
+ });
2053
2043
  }
2054
2044
 
2055
- return position;
2056
- }
2045
+ offset(element, position);
2057
2046
 
2058
- function moveBy(start, end, dim) {
2059
- return start === 'center' ? dim / 2 : start === end ? dim : 0;
2047
+ return flipped;
2060
2048
  }
2061
2049
 
2062
- function getIntersectionArea() {
2063
- let intersection;for (var _len = arguments.length, elements = new Array(_len), _key = 0; _key < _len; _key++) {elements[_key] = arguments[_key];}
2064
- for (const el of elements.filter(Boolean)) {
2065
- const rect = offset(el);
2066
- if (!intersection) {
2067
- intersection = rect;
2068
- continue;
2069
- }
2070
- for (const prop of ['left', 'top']) {
2071
- intersection[prop] = Math.max(rect[prop], intersection[prop]);
2072
- }
2073
- for (const prop of ['right', 'bottom']) {
2074
- intersection[prop] = Math.min(rect[prop], intersection[prop]);
2050
+ function moveTo(position, attach, dim, factor) {
2051
+ each(dirs, (_ref2, prop) => {let [dir, align, alignFlip] = _ref2;
2052
+ if (attach[dir] === alignFlip) {
2053
+ position[align] += dim[prop] * factor;
2054
+ } else if (attach[dir] === 'center') {
2055
+ position[align] += dim[prop] * factor / 2;
2075
2056
  }
2057
+ });
2058
+ }
2059
+
2060
+ function getPos(pos) {
2061
+ const x = /left|center|right/;
2062
+ const y = /top|center|bottom/;
2063
+
2064
+ pos = (pos || '').split(' ');
2065
+
2066
+ if (pos.length === 1) {
2067
+ pos = x.test(pos[0]) ?
2068
+ pos.concat('center') :
2069
+ y.test(pos[0]) ?
2070
+ ['center'].concat(pos) :
2071
+ ['center', 'center'];
2076
2072
  }
2077
- return intersection;
2073
+
2074
+ return {
2075
+ x: x.test(pos[0]) ? pos[0] : 'center',
2076
+ y: y.test(pos[1]) ? pos[1] : 'center' };
2077
+
2078
2078
  }
2079
2079
 
2080
- function intersectLine(dimA, dimB, dir) {
2081
- const [,, start, end] = dirs[dir];
2082
- return dimA[end] > dimB[start] && dimB[end] > dimA[start];
2080
+ function getOffsets(offsets, width, height) {
2081
+ const [x, y] = (offsets || '').split(' ');
2082
+
2083
+ return {
2084
+ x: x ? toFloat(x) * (endsWith(x, '%') ? width / 100 : 1) : 0,
2085
+ y: y ? toFloat(y) * (endsWith(y, '%') ? height / 100 : 1) : 0 };
2086
+
2083
2087
  }
2084
2088
 
2085
2089
  var util = /*#__PURE__*/Object.freeze({
@@ -2888,7 +2892,7 @@
2888
2892
  UIkit.data = '__uikit__';
2889
2893
  UIkit.prefix = 'uk-';
2890
2894
  UIkit.options = {};
2891
- UIkit.version = '3.13.6-dev.f130508b6';
2895
+ UIkit.version = '3.13.7-dev.120e5ee9c';
2892
2896
 
2893
2897
  globalAPI(UIkit);
2894
2898
  hooksAPI(UIkit);
@@ -3520,63 +3524,29 @@
3520
3524
  offset(target)[axis === 'x' ? 'right' : 'bottom'] :
3521
3525
  0;
3522
3526
  }
3523
- offset$1 = toPx(offset$1) + toPx(getCssVar('position-margin-offset', element));
3527
+ offset$1 = toPx(offset$1) + toPx(getCssVar('position-offset', element));
3524
3528
 
3525
- positionAt(element, target, {
3526
- boundary,
3527
- flip: this.flip,
3528
- attach: {
3529
- element: axis === 'x' ? [flipPosition(dir), align] : [align, flipPosition(dir)],
3530
- target: axis === 'x' ? [dir, align] : [align, dir] },
3531
-
3532
- offset:
3533
- axis === 'x' ?
3534
- [dir === 'left' ? -offset$1 : +offset$1, 0] :
3535
- [0, dir === 'top' ? -offset$1 : +offset$1] });
3536
-
3537
-
3538
- [this.dir, this.align] = getAlignment(element, target);
3529
+ const { x, y } = positionAt(
3530
+ element,
3531
+ target,
3532
+ axis === 'x' ? flipPosition(dir) + " " + align : align + " " + flipPosition(dir),
3533
+ axis === 'x' ? dir + " " + align : align + " " + dir,
3534
+ axis === 'x' ? "" + (
3535
+ dir === 'left' ? -offset$1 : offset$1) : " " + (
3536
+ dir === 'top' ? -offset$1 : offset$1),
3537
+ null,
3538
+ this.flip,
3539
+ boundary).
3540
+ target;
3541
+
3542
+ this.dir = axis === 'x' ? x : y;
3543
+ this.align = axis === 'x' ? y : x;
3539
3544
  },
3540
3545
 
3541
3546
  getAxis() {
3542
- return includes(['top', 'bottom'], this.dir) ? 'y' : 'x';
3547
+ return this.dir === 'top' || this.dir === 'bottom' ? 'y' : 'x';
3543
3548
  } } };
3544
3549
 
3545
-
3546
-
3547
- function getAlignment(el, target) {
3548
- const elOffset = offset(el);
3549
- const targetOffset = offset(target);
3550
- const properties = [
3551
- ['left', 'right'],
3552
- ['top', 'bottom']];
3553
-
3554
-
3555
- let dir;
3556
- for (const props of properties) {
3557
- if (elOffset[props[0]] >= targetOffset[props[1]]) {
3558
- dir = props[1];
3559
- break;
3560
- }
3561
- if (elOffset[props[1]] <= targetOffset[props[0]]) {
3562
- dir = props[0];
3563
- break;
3564
- }
3565
- }
3566
-
3567
- let align;
3568
- const props = includes(properties[0], dir) ? properties[1] : properties[0];
3569
- if (elOffset[props[0]] === targetOffset[props[0]]) {
3570
- align = props[0];
3571
- } else if (elOffset[props[1]] === targetOffset[props[1]]) {
3572
- align = props[1];
3573
- } else {
3574
- align = 'center';
3575
- }
3576
-
3577
- return [dir, align];
3578
- }
3579
-
3580
3550
  let active$1;
3581
3551
 
3582
3552
  var drop = {
@@ -3909,7 +3879,7 @@
3909
3879
  const targetOffset = offset(this.target);
3910
3880
  const alignTo = this.boundaryAlign ? boundaryOffset : targetOffset;
3911
3881
 
3912
- if (this.align === 'justify') {
3882
+ if (this.pos[1] === 'justify') {
3913
3883
  const prop = this.getAxis() === 'y' ? 'width' : 'height';
3914
3884
  css(this.$el, prop, alignTo[prop]);
3915
3885
  } else if (
@@ -4307,6 +4277,8 @@
4307
4277
  }
4308
4278
 
4309
4279
  var heightMatch = {
4280
+ mixins: [Resize],
4281
+
4310
4282
  args: 'target',
4311
4283
 
4312
4284
  props: {
@@ -4424,11 +4396,13 @@
4424
4396
  const box = boxModelAdjust(this.$el, 'height', 'content-box');
4425
4397
 
4426
4398
  if (this.expand) {
4427
- minHeight =
4399
+ minHeight = Math.max(
4428
4400
  height(window) - (
4429
4401
  dimensions(document.documentElement).height -
4430
4402
  dimensions(this.$el).height) -
4431
- box || '';
4403
+ box,
4404
+ 0);
4405
+
4432
4406
  } else {
4433
4407
  // on mobile devices (iOS and Android) window.innerHeight !== 100vh
4434
4408
  minHeight = 'calc(100vh';
@@ -4914,25 +4888,6 @@
4914
4888
  }
4915
4889
  },
4916
4890
 
4917
- update: {
4918
- write(store) {
4919
- if (!this.observer || isImg(this.$el)) {
4920
- return false;
4921
- }
4922
-
4923
- const srcset = data(this.$el, 'data-srcset');
4924
- if (srcset && window.devicePixelRatio !== 1) {
4925
- const bgSize = css(this.$el, 'backgroundSize');
4926
- if (bgSize.match(/^(auto\s?)+$/) || toFloat(bgSize) === store.bgSize) {
4927
- store.bgSize = getSourceSize(srcset, data(this.$el, 'sizes'));
4928
- css(this.$el, 'backgroundSize', store.bgSize + "px");
4929
- }
4930
- }
4931
- },
4932
-
4933
- events: ['resize'] },
4934
-
4935
-
4936
4891
  methods: {
4937
4892
  load() {
4938
4893
  if (this._data.image) {
@@ -5022,43 +4977,6 @@
5022
4977
  return sources.filter((source) => !isEmpty(source));
5023
4978
  }
5024
4979
 
5025
- const sizesRe = /\s*(.*?)\s*(\w+|calc\(.*?\))\s*(?:,|$)/g;
5026
- function sizesToPixel(sizes) {
5027
- let matches;
5028
-
5029
- sizesRe.lastIndex = 0;
5030
-
5031
- while (matches = sizesRe.exec(sizes)) {
5032
- if (!matches[1] || window.matchMedia(matches[1]).matches) {
5033
- matches = evaluateSize(matches[2]);
5034
- break;
5035
- }
5036
- }
5037
-
5038
- return matches || '100vw';
5039
- }
5040
-
5041
- const sizeRe = /\d+(?:\w+|%)/g;
5042
- const additionRe = /[+-]?(\d+)/g;
5043
- function evaluateSize(size) {
5044
- return startsWith(size, 'calc') ?
5045
- size.
5046
- slice(5, -1).
5047
- replace(sizeRe, (size) => toPx(size)).
5048
- replace(/ /g, '').
5049
- match(additionRe).
5050
- reduce((a, b) => a + +b, 0) :
5051
- size;
5052
- }
5053
-
5054
- const srcSetRe = /\s+\d+w\s*(?:,|$)/g;
5055
- function getSourceSize(srcset, sizes) {
5056
- const srcSize = toPx(sizesToPixel(sizes));
5057
- const descriptors = (srcset.match(srcSetRe) || []).map(toFloat).sort((a, b) => a - b);
5058
-
5059
- return descriptors.filter((size) => size >= srcSize)[0] || descriptors.pop() || '';
5060
- }
5061
-
5062
4980
  function ensureSrcAttribute(el) {
5063
4981
  if (isImg(el) && !hasAttr(el, 'src')) {
5064
4982
  attr(el, 'src', 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"></svg>');