uikit 3.13.6-dev.d986a0728 → 3.13.7-dev.04818b8b8

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 (48) hide show
  1. package/CHANGELOG.md +11 -4
  2. package/build/util.js +1 -1
  3. package/dist/css/uikit-core-rtl.css +1 -1
  4. package/dist/css/uikit-core-rtl.min.css +1 -1
  5. package/dist/css/uikit-core.css +1 -1
  6. package/dist/css/uikit-core.min.css +1 -1
  7. package/dist/css/uikit-rtl.css +1 -1
  8. package/dist/css/uikit-rtl.min.css +1 -1
  9. package/dist/css/uikit.css +1 -1
  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 +1 -1
  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 +1 -1
  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 +17 -51
  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 +139 -225
  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 +138 -224
  42. package/dist/js/uikit.min.js +1 -1
  43. package/package.json +1 -1
  44. package/src/js/core/drop.js +1 -1
  45. package/src/js/core/img.js +0 -57
  46. package/src/js/mixin/position.js +15 -48
  47. package/src/js/util/position.js +129 -125
  48. package/tests/position.html +39 -38
@@ -1,4 +1,4 @@
1
- /*! UIkit 3.13.6-dev.d986a0728 | https://www.getuikit.com | (c) 2014 - 2022 YOOtheme | MIT License */
1
+ /*! UIkit 3.13.7-dev.04818b8b8 | 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.d986a0728';
2895
+ UIkit.version = '3.13.7-dev.04818b8b8';
2892
2896
 
2893
2897
  globalAPI(UIkit);
2894
2898
  hooksAPI(UIkit);
@@ -3522,61 +3526,27 @@
3522
3526
  }
3523
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 (
@@ -4916,25 +4886,6 @@
4916
4886
  }
4917
4887
  },
4918
4888
 
4919
- update: {
4920
- write(store) {
4921
- if (!this.observer || isImg(this.$el)) {
4922
- return false;
4923
- }
4924
-
4925
- const srcset = data(this.$el, 'data-srcset');
4926
- if (srcset && window.devicePixelRatio !== 1) {
4927
- const bgSize = css(this.$el, 'backgroundSize');
4928
- if (bgSize.match(/^(auto\s?)+$/) || toFloat(bgSize) === store.bgSize) {
4929
- store.bgSize = getSourceSize(srcset, data(this.$el, 'sizes'));
4930
- css(this.$el, 'backgroundSize', store.bgSize + "px");
4931
- }
4932
- }
4933
- },
4934
-
4935
- events: ['resize'] },
4936
-
4937
-
4938
4889
  methods: {
4939
4890
  load() {
4940
4891
  if (this._data.image) {
@@ -5024,43 +4975,6 @@
5024
4975
  return sources.filter((source) => !isEmpty(source));
5025
4976
  }
5026
4977
 
5027
- const sizesRe = /\s*(.*?)\s*(\w+|calc\(.*?\))\s*(?:,|$)/g;
5028
- function sizesToPixel(sizes) {
5029
- let matches;
5030
-
5031
- sizesRe.lastIndex = 0;
5032
-
5033
- while (matches = sizesRe.exec(sizes)) {
5034
- if (!matches[1] || window.matchMedia(matches[1]).matches) {
5035
- matches = evaluateSize(matches[2]);
5036
- break;
5037
- }
5038
- }
5039
-
5040
- return matches || '100vw';
5041
- }
5042
-
5043
- const sizeRe = /\d+(?:\w+|%)/g;
5044
- const additionRe = /[+-]?(\d+)/g;
5045
- function evaluateSize(size) {
5046
- return startsWith(size, 'calc') ?
5047
- size.
5048
- slice(5, -1).
5049
- replace(sizeRe, (size) => toPx(size)).
5050
- replace(/ /g, '').
5051
- match(additionRe).
5052
- reduce((a, b) => a + +b, 0) :
5053
- size;
5054
- }
5055
-
5056
- const srcSetRe = /\s+\d+w\s*(?:,|$)/g;
5057
- function getSourceSize(srcset, sizes) {
5058
- const srcSize = toPx(sizesToPixel(sizes));
5059
- const descriptors = (srcset.match(srcSetRe) || []).map(toFloat).sort((a, b) => a - b);
5060
-
5061
- return descriptors.filter((size) => size >= srcSize)[0] || descriptors.pop() || '';
5062
- }
5063
-
5064
4978
  function ensureSrcAttribute(el) {
5065
4979
  if (isImg(el) && !hasAttr(el, 'src')) {
5066
4980
  attr(el, 'src', 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"></svg>');