uikit 3.11.2-dev.f2970ffaa → 3.12.0

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 (226) hide show
  1. package/.eslintrc.json +4 -49
  2. package/.prettierignore +14 -0
  3. package/.prettierrc.json +13 -0
  4. package/.webstorm.js +3 -3
  5. package/CHANGELOG.md +55 -19
  6. package/build/.eslintrc.json +1 -3
  7. package/build/build.js +26 -28
  8. package/build/icons.js +7 -11
  9. package/build/less.js +48 -36
  10. package/build/package.json +2 -2
  11. package/build/prefix.js +21 -18
  12. package/build/publishDev.js +6 -8
  13. package/build/release.js +20 -17
  14. package/build/scope.js +21 -11
  15. package/build/scss.js +72 -39
  16. package/build/util.js +71 -62
  17. package/build/wrapper/icons.js +0 -2
  18. package/dist/css/uikit-core-rtl.css +133 -201
  19. package/dist/css/uikit-core-rtl.min.css +1 -1
  20. package/dist/css/uikit-core.css +133 -201
  21. package/dist/css/uikit-core.min.css +1 -1
  22. package/dist/css/uikit-rtl.css +135 -207
  23. package/dist/css/uikit-rtl.min.css +1 -1
  24. package/dist/css/uikit.css +135 -207
  25. package/dist/css/uikit.min.css +1 -1
  26. package/dist/js/components/countdown.js +66 -138
  27. package/dist/js/components/countdown.min.js +1 -1
  28. package/dist/js/components/filter.js +408 -439
  29. package/dist/js/components/filter.min.js +1 -1
  30. package/dist/js/components/lightbox-panel.js +1091 -1319
  31. package/dist/js/components/lightbox-panel.min.js +1 -1
  32. package/dist/js/components/lightbox.js +1137 -1396
  33. package/dist/js/components/lightbox.min.js +1 -1
  34. package/dist/js/components/notification.js +94 -114
  35. package/dist/js/components/notification.min.js +1 -1
  36. package/dist/js/components/parallax.js +347 -372
  37. package/dist/js/components/parallax.min.js +1 -1
  38. package/dist/js/components/slider-parallax.js +345 -360
  39. package/dist/js/components/slider-parallax.min.js +1 -1
  40. package/dist/js/components/slider.js +749 -843
  41. package/dist/js/components/slider.min.js +1 -1
  42. package/dist/js/components/slideshow-parallax.js +345 -360
  43. package/dist/js/components/slideshow-parallax.min.js +1 -1
  44. package/dist/js/components/slideshow.js +628 -798
  45. package/dist/js/components/slideshow.min.js +1 -1
  46. package/dist/js/components/sortable.js +587 -620
  47. package/dist/js/components/sortable.min.js +1 -1
  48. package/dist/js/components/tooltip.js +324 -356
  49. package/dist/js/components/tooltip.min.js +1 -1
  50. package/dist/js/components/upload.js +156 -167
  51. package/dist/js/components/upload.min.js +1 -1
  52. package/dist/js/uikit-core.js +5324 -6527
  53. package/dist/js/uikit-core.min.js +1 -1
  54. package/dist/js/uikit-icons.js +7 -9
  55. package/dist/js/uikit-icons.min.js +1 -1
  56. package/dist/js/uikit.js +8006 -9663
  57. package/dist/js/uikit.min.js +1 -1
  58. package/jsconfig.json +1 -1
  59. package/package.json +64 -60
  60. package/src/js/api/boot.js +25 -32
  61. package/src/js/api/component.js +15 -28
  62. package/src/js/api/global.js +6 -12
  63. package/src/js/api/hooks.js +14 -33
  64. package/src/js/api/instance.js +7 -15
  65. package/src/js/api/state.js +199 -187
  66. package/src/js/components/countdown.js +32 -85
  67. package/src/js/components/filter.js +70 -66
  68. package/src/js/components/index.js +13 -13
  69. package/src/js/components/internal/lightbox-animations.js +14 -25
  70. package/src/js/components/internal/slider-preload.js +9 -0
  71. package/src/js/components/internal/slider-transitioner.js +66 -45
  72. package/src/js/components/internal/slideshow-animations.js +46 -64
  73. package/src/js/components/lightbox-panel.js +107 -105
  74. package/src/js/components/lightbox.js +17 -39
  75. package/src/js/components/notification.js +49 -43
  76. package/src/js/components/parallax.js +21 -46
  77. package/src/js/components/slider-parallax.js +13 -23
  78. package/src/js/components/slider.js +117 -89
  79. package/src/js/components/slideshow-parallax.js +1 -1
  80. package/src/js/components/slideshow.js +15 -13
  81. package/src/js/components/sortable.js +125 -106
  82. package/src/js/components/tooltip.js +41 -31
  83. package/src/js/components/upload.js +53 -63
  84. package/src/js/core/accordion.js +58 -48
  85. package/src/js/core/alert.js +9 -17
  86. package/src/js/core/core.js +17 -69
  87. package/src/js/core/cover.js +15 -15
  88. package/src/js/core/drop.js +110 -94
  89. package/src/js/core/form-custom.js +22 -27
  90. package/src/js/core/gif.js +3 -7
  91. package/src/js/core/grid.js +57 -58
  92. package/src/js/core/height-match.js +16 -29
  93. package/src/js/core/height-viewport.js +30 -34
  94. package/src/js/core/icon.js +47 -52
  95. package/src/js/core/img.js +153 -143
  96. package/src/js/core/index.js +39 -39
  97. package/src/js/core/leader.js +9 -18
  98. package/src/js/core/margin.js +21 -37
  99. package/src/js/core/modal.js +49 -36
  100. package/src/js/core/nav.js +2 -4
  101. package/src/js/core/navbar.js +113 -85
  102. package/src/js/core/offcanvas.js +51 -54
  103. package/src/js/core/overflow-auto.js +13 -17
  104. package/src/js/core/responsive.js +14 -12
  105. package/src/js/core/scroll.js +10 -20
  106. package/src/js/core/scrollspy-nav.js +34 -31
  107. package/src/js/core/scrollspy.js +37 -54
  108. package/src/js/core/sticky.js +175 -123
  109. package/src/js/core/svg.js +68 -83
  110. package/src/js/core/switcher.js +56 -47
  111. package/src/js/core/tab.js +7 -10
  112. package/src/js/core/toggle.js +69 -68
  113. package/src/js/core/video.js +22 -21
  114. package/src/js/mixin/animate.js +19 -20
  115. package/src/js/mixin/class.js +2 -4
  116. package/src/js/mixin/container.js +7 -11
  117. package/src/js/mixin/internal/animate-fade.js +73 -30
  118. package/src/js/mixin/internal/animate-slide.js +58 -41
  119. package/src/js/mixin/internal/slideshow-animations.js +7 -14
  120. package/src/js/mixin/internal/slideshow-transitioner.js +10 -17
  121. package/src/js/mixin/lazyload.js +20 -0
  122. package/src/js/mixin/media.js +5 -10
  123. package/src/js/mixin/modal.js +89 -66
  124. package/src/js/mixin/parallax.js +149 -107
  125. package/src/js/mixin/position.js +26 -20
  126. package/src/js/mixin/slider-autoplay.js +12 -21
  127. package/src/js/mixin/slider-drag.js +64 -65
  128. package/src/js/mixin/slider-nav.js +26 -35
  129. package/src/js/mixin/slider-reactive.js +2 -8
  130. package/src/js/mixin/slider.js +47 -60
  131. package/src/js/mixin/slideshow.js +12 -22
  132. package/src/js/mixin/swipe.js +72 -0
  133. package/src/js/mixin/togglable.js +89 -63
  134. package/src/js/uikit-core.js +2 -4
  135. package/src/js/uikit.js +2 -4
  136. package/src/js/util/ajax.js +25 -40
  137. package/src/js/util/animation.js +77 -75
  138. package/src/js/util/attr.js +17 -21
  139. package/src/js/util/class.js +14 -52
  140. package/src/js/util/dimensions.js +78 -49
  141. package/src/js/util/dom.js +37 -66
  142. package/src/js/util/env.js +7 -12
  143. package/src/js/util/event.js +60 -59
  144. package/src/js/util/fastdom.js +1 -6
  145. package/src/js/util/filter.js +18 -36
  146. package/src/js/util/index.js +1 -1
  147. package/src/js/util/lang.js +82 -121
  148. package/src/js/util/mouse.js +19 -17
  149. package/src/js/util/observer.js +36 -0
  150. package/src/js/util/options.js +35 -49
  151. package/src/js/util/player.js +41 -36
  152. package/src/js/util/position.js +54 -46
  153. package/src/js/util/selector.js +43 -58
  154. package/src/js/util/style.js +39 -49
  155. package/src/js/util/viewport.js +75 -64
  156. package/src/less/components/base.less +10 -33
  157. package/src/less/components/flex.less +0 -9
  158. package/src/less/components/form-range.less +48 -95
  159. package/src/less/components/form.less +0 -1
  160. package/src/less/components/height.less +3 -0
  161. package/src/less/components/leader.less +0 -1
  162. package/src/less/components/lightbox.less +0 -1
  163. package/src/less/components/modal.less +3 -7
  164. package/src/less/components/navbar.less +0 -7
  165. package/src/less/components/progress.less +14 -36
  166. package/src/less/components/slider.less +0 -3
  167. package/src/less/components/slideshow.less +0 -3
  168. package/src/less/components/text.less +16 -32
  169. package/src/less/components/utility.less +25 -0
  170. package/src/scss/components/base.scss +10 -33
  171. package/src/scss/components/flex.scss +0 -9
  172. package/src/scss/components/form-range.scss +48 -95
  173. package/src/scss/components/form.scss +3 -4
  174. package/src/scss/components/height.scss +3 -0
  175. package/src/scss/components/icon.scss +2 -2
  176. package/src/scss/components/leader.scss +0 -1
  177. package/src/scss/components/lightbox.scss +0 -1
  178. package/src/scss/components/modal.scss +3 -7
  179. package/src/scss/components/navbar.scss +0 -7
  180. package/src/scss/components/progress.scss +14 -36
  181. package/src/scss/components/search.scss +1 -1
  182. package/src/scss/components/slider.scss +0 -3
  183. package/src/scss/components/slideshow.scss +0 -3
  184. package/src/scss/components/text.scss +16 -32
  185. package/src/scss/components/utility.scss +25 -0
  186. package/src/scss/mixins-theme.scss +1 -1
  187. package/src/scss/mixins.scss +1 -1
  188. package/src/scss/variables-theme.scss +9 -9
  189. package/src/scss/variables.scss +9 -9
  190. package/tests/align.html +10 -10
  191. package/tests/animation.html +2 -2
  192. package/tests/article.html +2 -2
  193. package/tests/base.html +3 -3
  194. package/tests/card.html +10 -10
  195. package/tests/column.html +3 -3
  196. package/tests/comment.html +9 -9
  197. package/tests/countdown.html +10 -8
  198. package/tests/dotnav.html +3 -3
  199. package/tests/image.html +296 -64
  200. package/tests/images/image-type.avif +0 -0
  201. package/tests/images/image-type.jpeg +0 -0
  202. package/tests/images/image-type.webp +0 -0
  203. package/tests/index.html +8 -8
  204. package/tests/js/index.js +114 -85
  205. package/tests/lightbox.html +10 -10
  206. package/tests/marker.html +2 -2
  207. package/tests/modal.html +8 -9
  208. package/tests/navbar.html +2 -2
  209. package/tests/overlay.html +7 -7
  210. package/tests/parallax.html +16 -7
  211. package/tests/position.html +12 -12
  212. package/tests/slidenav.html +12 -12
  213. package/tests/slider.html +20 -20
  214. package/tests/sortable.html +1 -1
  215. package/tests/sticky-parallax.html +87 -99
  216. package/tests/sticky.html +56 -24
  217. package/tests/svg.html +6 -6
  218. package/tests/table.html +11 -11
  219. package/tests/thumbnav.html +12 -12
  220. package/tests/transition.html +30 -30
  221. package/tests/utility.html +50 -33
  222. package/tests/video.html +1 -1
  223. package/tests/width.html +1 -1
  224. package/src/js/mixin/flex-bug.js +0 -56
  225. package/src/js/util/promise.js +0 -191
  226. package/tests/images/animated.gif +0 -0
@@ -1,19 +1,15 @@
1
- import {isIE} from './env';
2
- import {findAll} from './selector';
3
- import {closest, within} from './filter';
4
- import {isArray, isBoolean, isFunction, isString, toNode, toNodes} from './lang';
1
+ import { findAll } from './selector';
2
+ import { closest, within } from './filter';
3
+ import { isArray, isFunction, isString, toNode, toNodes } from './lang';
5
4
 
6
5
  export function on(...args) {
7
-
8
- let [targets, type, selector, listener, useCapture] = getArgs(args);
9
-
10
- targets = toEventTargets(targets);
6
+ let [targets, types, selector, listener, useCapture = false] = getArgs(args);
11
7
 
12
8
  if (listener.length > 1) {
13
9
  listener = detail(listener);
14
10
  }
15
11
 
16
- if (useCapture && useCapture.self) {
12
+ if (useCapture?.self) {
17
13
  listener = selfFilter(listener);
18
14
  }
19
15
 
@@ -21,80 +17,92 @@ export function on(...args) {
21
17
  listener = delegate(selector, listener);
22
18
  }
23
19
 
24
- useCapture = useCaptureFilter(useCapture);
20
+ for (const type of types) {
21
+ for (const target of targets) {
22
+ target.addEventListener(type, listener, useCapture);
23
+ }
24
+ }
25
25
 
26
- type.split(' ').forEach(type =>
27
- targets.forEach(target =>
28
- target.addEventListener(type, listener, useCapture)
29
- )
30
- );
31
- return () => off(targets, type, listener, useCapture);
26
+ return () => off(targets, types, listener, useCapture);
32
27
  }
33
28
 
34
- export function off(targets, type, listener, useCapture = false) {
35
- useCapture = useCaptureFilter(useCapture);
36
- targets = toEventTargets(targets);
37
- type.split(' ').forEach(type =>
38
- targets.forEach(target =>
39
- target.removeEventListener(type, listener, useCapture)
40
- )
41
- );
29
+ export function off(...args) {
30
+ let [targets, types, , listener, useCapture = false] = getArgs(args);
31
+ for (const type of types) {
32
+ for (const target of targets) {
33
+ target.removeEventListener(type, listener, useCapture);
34
+ }
35
+ }
42
36
  }
43
37
 
44
38
  export function once(...args) {
45
-
46
- const [element, type, selector, listener, useCapture, condition] = getArgs(args);
47
- const off = on(element, type, selector, e => {
48
- const result = !condition || condition(e);
49
- if (result) {
50
- off();
51
- listener(e, result);
52
- }
53
- }, useCapture);
39
+ const [element, types, selector, listener, useCapture = false, condition] = getArgs(args);
40
+ const off = on(
41
+ element,
42
+ types,
43
+ selector,
44
+ (e) => {
45
+ const result = !condition || condition(e);
46
+ if (result) {
47
+ off();
48
+ listener(e, result);
49
+ }
50
+ },
51
+ useCapture
52
+ );
54
53
 
55
54
  return off;
56
55
  }
57
56
 
58
57
  export function trigger(targets, event, detail) {
59
- return toEventTargets(targets).reduce((notCanceled, target) =>
60
- notCanceled && target.dispatchEvent(createEvent(event, true, true, detail))
61
- , true);
58
+ return toEventTargets(targets).every((target) =>
59
+ target.dispatchEvent(createEvent(event, true, true, detail))
60
+ );
62
61
  }
63
62
 
64
63
  export function createEvent(e, bubbles = true, cancelable = false, detail) {
65
64
  if (isString(e)) {
66
- const event = document.createEvent('CustomEvent'); // IE 11
67
- event.initCustomEvent(e, bubbles, cancelable, detail);
68
- e = event;
65
+ e = new CustomEvent(e, { bubbles, cancelable, detail });
69
66
  }
70
67
 
71
68
  return e;
72
69
  }
73
70
 
74
71
  function getArgs(args) {
72
+ // Event targets
73
+ args[0] = toEventTargets(args[0]);
74
+
75
+ // Event types
76
+ if (isString(args[1])) {
77
+ args[1] = args[1].split(' ');
78
+ }
79
+
80
+ // Delegate?
75
81
  if (isFunction(args[2])) {
76
82
  args.splice(2, 0, false);
77
83
  }
84
+
78
85
  return args;
79
86
  }
80
87
 
81
88
  function delegate(selector, listener) {
82
- return e => {
83
-
84
- const current = selector[0] === '>'
85
- ? findAll(selector, e.currentTarget).reverse().filter(element => within(e.target, element))[0]
86
- : closest(e.target, selector);
89
+ return (e) => {
90
+ const current =
91
+ selector[0] === '>'
92
+ ? findAll(selector, e.currentTarget)
93
+ .reverse()
94
+ .filter((element) => within(e.target, element))[0]
95
+ : closest(e.target, selector);
87
96
 
88
97
  if (current) {
89
98
  e.current = current;
90
99
  listener.call(this, e);
91
100
  }
92
-
93
101
  };
94
102
  }
95
103
 
96
104
  function detail(listener) {
97
- return e => isArray(e.detail) ? listener(e, ...e.detail) : listener(e);
105
+ return (e) => (isArray(e.detail) ? listener(e, ...e.detail) : listener(e));
98
106
  }
99
107
 
100
108
  function selfFilter(listener) {
@@ -105,12 +113,6 @@ function selfFilter(listener) {
105
113
  };
106
114
  }
107
115
 
108
- function useCaptureFilter(options) {
109
- return options && isIE && !isBoolean(options)
110
- ? !!options.capture
111
- : options;
112
- }
113
-
114
116
  function isEventTarget(target) {
115
117
  return target && 'addEventListener' in target;
116
118
  }
@@ -123,10 +125,10 @@ export function toEventTargets(target) {
123
125
  return isArray(target)
124
126
  ? target.map(toEventTarget).filter(Boolean)
125
127
  : isString(target)
126
- ? findAll(target)
127
- : isEventTarget(target)
128
- ? [target]
129
- : toNodes(target);
128
+ ? findAll(target)
129
+ : isEventTarget(target)
130
+ ? [target]
131
+ : toNodes(target);
130
132
  }
131
133
 
132
134
  export function isTouch(e) {
@@ -134,8 +136,7 @@ export function isTouch(e) {
134
136
  }
135
137
 
136
138
  export function getEventPos(e) {
137
- const {touches, changedTouches} = e;
138
- const {clientX: x, clientY: y} = touches && touches[0] || changedTouches && changedTouches[0] || e;
139
+ const { clientX: x, clientY: y } = e.touches?.[0] || e.changedTouches?.[0] || e;
139
140
 
140
- return {x, y};
141
+ return { x, y };
141
142
  }
@@ -1,4 +1,3 @@
1
- import {Promise} from './promise';
2
1
  /*
3
2
  Based on:
4
3
  Copyright (c) 2016 Wilson Page wilsonpage@me.com
@@ -6,7 +5,6 @@ import {Promise} from './promise';
6
5
  */
7
6
 
8
7
  export const fastdom = {
9
-
10
8
  reads: [],
11
9
  writes: [],
12
10
 
@@ -27,8 +25,7 @@ export const fastdom = {
27
25
  remove(this.writes, task);
28
26
  },
29
27
 
30
- flush
31
-
28
+ flush,
32
29
  };
33
30
 
34
31
  function flush(recursion) {
@@ -44,7 +41,6 @@ function flush(recursion) {
44
41
 
45
42
  const RECURSION_LIMIT = 4;
46
43
  function scheduleFlush(recursion) {
47
-
48
44
  if (fastdom.scheduled) {
49
45
  return;
50
46
  }
@@ -55,7 +51,6 @@ function scheduleFlush(recursion) {
55
51
  } else {
56
52
  requestAnimationFrame(() => flush(1));
57
53
  }
58
-
59
54
  }
60
55
 
61
56
  function runTasks(tasks) {
@@ -1,5 +1,4 @@
1
- import {inBrowser} from './env';
2
- import {isDocument, isElement, isString, noop, startsWith, toNode, toNodes} from './lang';
1
+ import { isElement, isString, startsWith, toNode, toNodes } from './lang';
3
2
 
4
3
  const voidElements = {
5
4
  area: true,
@@ -17,19 +16,21 @@ const voidElements = {
17
16
  param: true,
18
17
  source: true,
19
18
  track: true,
20
- wbr: true
19
+ wbr: true,
21
20
  };
22
21
  export function isVoidElement(element) {
23
- return toNodes(element).some(element => voidElements[element.tagName.toLowerCase()]);
22
+ return toNodes(element).some((element) => voidElements[element.tagName.toLowerCase()]);
24
23
  }
25
24
 
26
25
  export function isVisible(element) {
27
- return toNodes(element).some(element => element.offsetWidth || element.offsetHeight || element.getClientRects().length);
26
+ return toNodes(element).some(
27
+ (element) => element.offsetWidth || element.offsetHeight || element.getClientRects().length
28
+ );
28
29
  }
29
30
 
30
31
  export const selInput = 'input,select,textarea,button';
31
32
  export function isInput(element) {
32
- return toNodes(element).some(element => matches(element, selInput));
33
+ return toNodes(element).some((element) => matches(element, selInput));
33
34
  }
34
35
 
35
36
  export const selFocusable = `${selInput},a[href],[tabindex]`;
@@ -38,50 +39,33 @@ export function isFocusable(element) {
38
39
  }
39
40
 
40
41
  export function parent(element) {
41
- element = toNode(element);
42
- return element && isElement(element.parentNode) && element.parentNode;
42
+ return toNode(element)?.parentElement;
43
43
  }
44
44
 
45
45
  export function filter(element, selector) {
46
- return toNodes(element).filter(element => matches(element, selector));
46
+ return toNodes(element).filter((element) => matches(element, selector));
47
47
  }
48
48
 
49
- const elProto = inBrowser ? Element.prototype : {};
50
- const matchesFn = elProto.matches || elProto.webkitMatchesSelector || elProto.msMatchesSelector || noop;
51
-
52
49
  export function matches(element, selector) {
53
- return toNodes(element).some(element => matchesFn.call(element, selector));
50
+ return toNodes(element).some((element) => element.matches(selector));
54
51
  }
55
52
 
56
- const closestFn = elProto.closest || function (selector) {
57
- let ancestor = this;
58
-
59
- do {
60
-
61
- if (matches(ancestor, selector)) {
62
- return ancestor;
63
- }
64
-
65
- } while ((ancestor = parent(ancestor)));
66
- };
67
-
68
53
  export function closest(element, selector) {
69
-
70
54
  if (startsWith(selector, '>')) {
71
55
  selector = selector.slice(1);
72
56
  }
73
57
 
74
58
  return isElement(element)
75
- ? closestFn.call(element, selector)
76
- : toNodes(element).map(element => closest(element, selector)).filter(Boolean);
59
+ ? element.closest(selector)
60
+ : toNodes(element)
61
+ .map((element) => closest(element, selector))
62
+ .filter(Boolean);
77
63
  }
78
64
 
79
65
  export function within(element, selector) {
80
- return !isString(selector)
81
- ? element === selector || (isDocument(selector)
82
- ? selector.documentElement
83
- : toNode(selector)).contains(toNode(element)) // IE 11 document does not implement contains
84
- : matches(element, selector) || !!closest(element, selector);
66
+ return isString(selector)
67
+ ? matches(element, selector) || !!closest(element, selector)
68
+ : element === selector || toNode(selector).contains(toNode(element));
85
69
  }
86
70
 
87
71
  export function parents(element, selector) {
@@ -103,7 +87,5 @@ export function children(element, selector) {
103
87
  }
104
88
 
105
89
  export function index(element, ref) {
106
- return ref
107
- ? toNodes(element).indexOf(toNode(ref))
108
- : children(parent(element)).indexOf(element);
90
+ return ref ? toNodes(element).indexOf(toNode(ref)) : children(parent(element)).indexOf(element);
109
91
  }
@@ -10,10 +10,10 @@ export * from './fastdom';
10
10
  export * from './filter';
11
11
  export * from './lang';
12
12
  export * from './mouse';
13
+ export * from './observer';
13
14
  export * from './options';
14
15
  export * from './player';
15
16
  export * from './position';
16
- export * from './promise';
17
17
  export * from './selector';
18
18
  export * from './style';
19
19
  export * from './viewport';