uikit 3.11.2-dev.31cd2ba38 → 3.11.2-dev.3dfa2c50b

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 (168) 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 +7 -11
  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 +42 -17
  19. package/dist/css/uikit-core-rtl.min.css +1 -1
  20. package/dist/css/uikit-core.css +42 -17
  21. package/dist/css/uikit-core.min.css +1 -1
  22. package/dist/css/uikit-rtl.css +42 -17
  23. package/dist/css/uikit-rtl.min.css +1 -1
  24. package/dist/css/uikit.css +42 -17
  25. package/dist/css/uikit.min.css +1 -1
  26. package/dist/js/components/countdown.js +88 -133
  27. package/dist/js/components/countdown.min.js +1 -1
  28. package/dist/js/components/filter.js +409 -438
  29. package/dist/js/components/filter.min.js +1 -1
  30. package/dist/js/components/lightbox-panel.js +1116 -1305
  31. package/dist/js/components/lightbox-panel.min.js +1 -1
  32. package/dist/js/components/lightbox.js +1164 -1383
  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 +294 -345
  37. package/dist/js/components/parallax.min.js +1 -1
  38. package/dist/js/components/slider-parallax.js +292 -344
  39. package/dist/js/components/slider-parallax.min.js +1 -1
  40. package/dist/js/components/slider.js +727 -850
  41. package/dist/js/components/slider.min.js +1 -1
  42. package/dist/js/components/slideshow-parallax.js +292 -344
  43. package/dist/js/components/slideshow-parallax.min.js +1 -1
  44. package/dist/js/components/slideshow.js +615 -799
  45. package/dist/js/components/slideshow.min.js +1 -1
  46. package/dist/js/components/sortable.js +588 -619
  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 +155 -167
  51. package/dist/js/components/upload.min.js +1 -1
  52. package/dist/js/uikit-core.js +5266 -6572
  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 +8126 -9876
  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 +23 -27
  62. package/src/js/api/global.js +6 -12
  63. package/src/js/api/hooks.js +13 -32
  64. package/src/js/api/instance.js +7 -15
  65. package/src/js/api/state.js +79 -100
  66. package/src/js/components/countdown.js +24 -50
  67. package/src/js/components/filter.js +71 -66
  68. package/src/js/components/index.js +13 -13
  69. package/src/js/components/internal/lightbox-animations.js +11 -23
  70. package/src/js/components/internal/slider-transitioner.js +66 -45
  71. package/src/js/components/internal/slideshow-animations.js +42 -61
  72. package/src/js/components/lightbox-panel.js +135 -109
  73. package/src/js/components/lightbox.js +18 -39
  74. package/src/js/components/notification.js +49 -43
  75. package/src/js/components/parallax.js +16 -30
  76. package/src/js/components/slider-parallax.js +13 -23
  77. package/src/js/components/slider.js +75 -64
  78. package/src/js/components/slideshow-parallax.js +1 -1
  79. package/src/js/components/slideshow.js +8 -13
  80. package/src/js/components/sortable.js +125 -106
  81. package/src/js/components/tooltip.js +41 -31
  82. package/src/js/components/upload.js +52 -63
  83. package/src/js/core/accordion.js +53 -48
  84. package/src/js/core/alert.js +10 -17
  85. package/src/js/core/core.js +74 -53
  86. package/src/js/core/cover.js +11 -15
  87. package/src/js/core/drop.js +106 -92
  88. package/src/js/core/form-custom.js +20 -25
  89. package/src/js/core/gif.js +3 -7
  90. package/src/js/core/grid.js +57 -58
  91. package/src/js/core/height-match.js +16 -29
  92. package/src/js/core/height-viewport.js +28 -35
  93. package/src/js/core/icon.js +38 -50
  94. package/src/js/core/img.js +130 -105
  95. package/src/js/core/index.js +39 -39
  96. package/src/js/core/leader.js +9 -18
  97. package/src/js/core/margin.js +21 -37
  98. package/src/js/core/modal.js +50 -36
  99. package/src/js/core/nav.js +2 -4
  100. package/src/js/core/navbar.js +112 -88
  101. package/src/js/core/offcanvas.js +49 -53
  102. package/src/js/core/overflow-auto.js +13 -17
  103. package/src/js/core/responsive.js +14 -12
  104. package/src/js/core/scroll.js +10 -20
  105. package/src/js/core/scrollspy-nav.js +34 -31
  106. package/src/js/core/scrollspy.js +37 -54
  107. package/src/js/core/sticky.js +130 -91
  108. package/src/js/core/svg.js +60 -79
  109. package/src/js/core/switcher.js +47 -46
  110. package/src/js/core/tab.js +7 -10
  111. package/src/js/core/toggle.js +64 -66
  112. package/src/js/core/video.js +11 -22
  113. package/src/js/mixin/animate.js +19 -20
  114. package/src/js/mixin/class.js +2 -4
  115. package/src/js/mixin/container.js +7 -11
  116. package/src/js/mixin/internal/animate-fade.js +73 -30
  117. package/src/js/mixin/internal/animate-slide.js +61 -41
  118. package/src/js/mixin/internal/slideshow-animations.js +7 -14
  119. package/src/js/mixin/internal/slideshow-transitioner.js +10 -17
  120. package/src/js/mixin/media.js +5 -10
  121. package/src/js/mixin/modal.js +89 -66
  122. package/src/js/mixin/parallax.js +53 -48
  123. package/src/js/mixin/position.js +26 -20
  124. package/src/js/mixin/slider-autoplay.js +12 -21
  125. package/src/js/mixin/slider-drag.js +64 -65
  126. package/src/js/mixin/slider-nav.js +26 -35
  127. package/src/js/mixin/slider-reactive.js +2 -8
  128. package/src/js/mixin/slider.js +51 -50
  129. package/src/js/mixin/slideshow.js +13 -19
  130. package/src/js/mixin/togglable.js +90 -63
  131. package/src/js/uikit-core.js +2 -4
  132. package/src/js/uikit.js +2 -4
  133. package/src/js/util/ajax.js +27 -43
  134. package/src/js/util/animation.js +82 -75
  135. package/src/js/util/attr.js +17 -21
  136. package/src/js/util/class.js +14 -52
  137. package/src/js/util/dimensions.js +56 -43
  138. package/src/js/util/dom.js +40 -73
  139. package/src/js/util/env.js +7 -12
  140. package/src/js/util/event.js +60 -59
  141. package/src/js/util/fastdom.js +1 -6
  142. package/src/js/util/filter.js +17 -34
  143. package/src/js/util/index.js +0 -1
  144. package/src/js/util/lang.js +79 -119
  145. package/src/js/util/mouse.js +19 -17
  146. package/src/js/util/options.js +42 -47
  147. package/src/js/util/player.js +40 -36
  148. package/src/js/util/position.js +54 -46
  149. package/src/js/util/promise.js +0 -191
  150. package/src/js/util/selector.js +39 -48
  151. package/src/js/util/style.js +36 -46
  152. package/src/js/util/viewport.js +75 -64
  153. package/src/less/components/flex.less +0 -9
  154. package/src/less/components/navbar.less +0 -7
  155. package/src/less/components/utility.less +22 -0
  156. package/src/scss/components/flex.scss +0 -9
  157. package/src/scss/components/form.scss +3 -3
  158. package/src/scss/components/icon.scss +2 -2
  159. package/src/scss/components/navbar.scss +0 -7
  160. package/src/scss/components/search.scss +1 -1
  161. package/src/scss/components/utility.scss +22 -0
  162. package/src/scss/variables-theme.scss +6 -6
  163. package/src/scss/variables.scss +6 -6
  164. package/tests/image.html +38 -22
  165. package/tests/js/index.js +114 -85
  166. package/src/js/mixin/flex-bug.js +0 -56
  167. package/tests/images/test.avif +0 -0
  168. package/tests/images/test.webp +0 -0
@@ -1,16 +1,30 @@
1
1
  import Class from '../mixin/class';
2
- import Slider, {speedUp} from '../mixin/slider';
2
+ import Slider, { speedUp } from '../mixin/slider';
3
3
  import SliderReactive from '../mixin/slider-reactive';
4
- import Transitioner, {getMax, getWidth} from './internal/slider-transitioner';
5
- import {$, addClass, children, css, data, dimensions, findIndex, includes, isEmpty, last, sortBy, toFloat, toggleClass, toNumber} from 'uikit-util';
4
+ import Transitioner, { getMax, getWidth } from './internal/slider-transitioner';
5
+ import {
6
+ $,
7
+ addClass,
8
+ children,
9
+ css,
10
+ data,
11
+ dimensions,
12
+ findIndex,
13
+ includes,
14
+ isEmpty,
15
+ last,
16
+ sortBy,
17
+ toFloat,
18
+ toggleClass,
19
+ toNumber,
20
+ } from 'uikit-util';
6
21
 
7
22
  export default {
8
-
9
23
  mixins: [Class, Slider, SliderReactive],
10
24
 
11
25
  props: {
12
26
  center: Boolean,
13
- sets: Boolean
27
+ sets: Boolean,
14
28
  },
15
29
 
16
30
  data: {
@@ -20,22 +34,24 @@ export default {
20
34
  selList: '.uk-slider-items',
21
35
  selNav: '.uk-slider-nav',
22
36
  clsContainer: 'uk-slider-container',
23
- Transitioner
37
+ Transitioner,
24
38
  },
25
39
 
26
40
  computed: {
27
-
28
41
  avgWidth() {
29
42
  return getWidth(this.list) / this.length;
30
43
  },
31
44
 
32
- finite({finite}) {
33
- return finite || Math.ceil(getWidth(this.list)) < Math.floor(dimensions(this.list).width + getMaxElWidth(this.list) + this.center);
45
+ finite({ finite }) {
46
+ return (
47
+ finite ||
48
+ Math.ceil(getWidth(this.list)) <
49
+ Math.floor(dimensions(this.list).width + getMaxElWidth(this.list) + this.center)
50
+ );
34
51
  },
35
52
 
36
53
  maxIndex() {
37
-
38
- if (!this.finite || this.center && !this.sets) {
54
+ if (!this.finite || (this.center && !this.sets)) {
39
55
  return this.length - 1;
40
56
  }
41
57
 
@@ -45,21 +61,18 @@ export default {
45
61
 
46
62
  let lft = 0;
47
63
  const max = getMax(this.list);
48
- const index = findIndex(this.slides, el => {
49
-
64
+ const index = findIndex(this.slides, (el) => {
50
65
  if (lft >= max) {
51
66
  return true;
52
67
  }
53
68
 
54
69
  lft += dimensions(el).width;
55
-
56
70
  });
57
71
 
58
72
  return ~index ? index : this.length - 1;
59
73
  },
60
74
 
61
- sets({sets}) {
62
-
75
+ sets({ sets }) {
63
76
  if (!sets) {
64
77
  return;
65
78
  }
@@ -71,47 +84,44 @@ export default {
71
84
  let slideLeft = 0;
72
85
 
73
86
  sets = sortBy(this.slides, 'offsetLeft').reduce((sets, slide, i) => {
74
-
75
87
  const slideWidth = dimensions(slide).width;
76
88
  const slideRight = slideLeft + slideWidth;
77
89
 
78
90
  if (slideRight > left) {
79
-
80
91
  if (!this.center && i > this.maxIndex) {
81
92
  i = this.maxIndex;
82
93
  }
83
94
 
84
95
  if (!includes(sets, i)) {
85
-
86
96
  const cmp = this.slides[i + 1];
87
- if (this.center && cmp && slideWidth < leftCenter - dimensions(cmp).width / 2) {
97
+ if (
98
+ this.center &&
99
+ cmp &&
100
+ slideWidth < leftCenter - dimensions(cmp).width / 2
101
+ ) {
88
102
  leftCenter -= slideWidth;
89
103
  } else {
90
104
  leftCenter = width;
91
105
  sets.push(i);
92
106
  left = slideLeft + width + (this.center ? slideWidth / 2 : 0);
93
107
  }
94
-
95
108
  }
96
109
  }
97
110
 
98
111
  slideLeft += slideWidth;
99
112
 
100
113
  return sets;
101
-
102
114
  }, []);
103
115
 
104
116
  return !isEmpty(sets) && sets;
105
-
106
117
  },
107
118
 
108
119
  transitionOptions() {
109
120
  return {
110
121
  center: this.center,
111
- list: this.list
122
+ list: this.list,
112
123
  };
113
- }
114
-
124
+ },
115
125
  },
116
126
 
117
127
  connected() {
@@ -119,14 +129,16 @@ export default {
119
129
  },
120
130
 
121
131
  update: {
122
-
123
132
  write() {
124
- this.navItems.forEach(el => {
133
+ for (const el of this.navItems) {
125
134
  const index = toNumber(data(el, this.attrItem));
126
135
  if (index !== false) {
127
- el.hidden = !this.maxIndex || index > this.maxIndex || this.sets && !includes(this.sets, index);
136
+ el.hidden =
137
+ !this.maxIndex ||
138
+ index > this.maxIndex ||
139
+ (this.sets && !includes(this.sets, index));
128
140
  }
129
- });
141
+ }
130
142
 
131
143
  if (this.length && !this.dragging && !this.stack.length) {
132
144
  this.reorder();
@@ -134,33 +146,40 @@ export default {
134
146
  }
135
147
 
136
148
  const actives = this._getTransitioner(this.index).getActives();
137
- this.slides.forEach(slide => toggleClass(slide, this.clsActive, includes(actives, slide)));
138
-
139
- if (this.clsActivated && (!this.sets || includes(this.sets, toFloat(this.index)))) {
140
- this.slides.forEach(slide => toggleClass(slide, this.clsActivated || '', includes(actives, slide)));
149
+ const activeClasses = [
150
+ this.clsActive,
151
+ ((!this.sets || includes(this.sets, toFloat(this.index))) && this.clsActivated) ||
152
+ '',
153
+ ];
154
+ for (const slide of this.slides) {
155
+ toggleClass(slide, activeClasses, includes(actives, slide));
141
156
  }
142
157
  },
143
158
 
144
- events: ['resize']
145
-
159
+ events: ['resize'],
146
160
  },
147
161
 
148
162
  events: {
149
-
150
163
  beforeitemshow(e) {
151
-
152
- if (!this.dragging && this.sets && this.stack.length < 2 && !includes(this.sets, this.index)) {
164
+ if (
165
+ !this.dragging &&
166
+ this.sets &&
167
+ this.stack.length < 2 &&
168
+ !includes(this.sets, this.index)
169
+ ) {
153
170
  this.index = this.getValidIndex();
154
171
  }
155
172
 
156
173
  const diff = Math.abs(
157
- this.index
158
- - this.prevIndex
159
- + (this.dir > 0 && this.index < this.prevIndex || this.dir < 0 && this.index > this.prevIndex ? (this.maxIndex + 1) * this.dir : 0)
174
+ this.index -
175
+ this.prevIndex +
176
+ ((this.dir > 0 && this.index < this.prevIndex) ||
177
+ (this.dir < 0 && this.index > this.prevIndex)
178
+ ? (this.maxIndex + 1) * this.dir
179
+ : 0)
160
180
  );
161
181
 
162
182
  if (!this.dragging && diff > 1) {
163
-
164
183
  for (let i = 0; i < diff; i++) {
165
184
  this.stack.splice(1, 0, this.dir > 0 ? 'next' : 'previous');
166
185
  }
@@ -169,25 +188,24 @@ export default {
169
188
  return;
170
189
  }
171
190
 
172
- const index = this.dir < 0 || !this.slides[this.prevIndex] ? this.index : this.prevIndex;
173
- this.duration = speedUp(this.avgWidth / this.velocity) * (dimensions(this.slides[index]).width / this.avgWidth);
191
+ const index =
192
+ this.dir < 0 || !this.slides[this.prevIndex] ? this.index : this.prevIndex;
193
+ this.duration =
194
+ speedUp(this.avgWidth / this.velocity) *
195
+ (dimensions(this.slides[index]).width / this.avgWidth);
174
196
 
175
197
  this.reorder();
176
-
177
198
  },
178
199
 
179
200
  itemshow() {
180
201
  if (~this.prevIndex) {
181
202
  addClass(this._getTransitioner().getItemIn(), this.clsActive);
182
203
  }
183
- }
184
-
204
+ },
185
205
  },
186
206
 
187
207
  methods: {
188
-
189
208
  reorder() {
190
-
191
209
  if (this.finite) {
192
210
  css(this.slides, 'order', '');
193
211
  return;
@@ -196,11 +214,10 @@ export default {
196
214
  const index = this.dir > 0 && this.slides[this.prevIndex] ? this.prevIndex : this.index;
197
215
 
198
216
  this.slides.forEach((slide, i) =>
199
- css(slide, 'order', this.dir > 0 && i < index
200
- ? 1
201
- : this.dir < 0 && i >= this.index
202
- ? -1
203
- : ''
217
+ css(
218
+ slide,
219
+ 'order',
220
+ this.dir > 0 && i < index ? 1 : this.dir < 0 && i >= this.index ? -1 : ''
204
221
  )
205
222
  );
206
223
 
@@ -219,11 +236,9 @@ export default {
219
236
  css(slide, 'order', slideIndex > index ? -2 : -1);
220
237
  width -= dimensions(slide).width;
221
238
  }
222
-
223
239
  },
224
240
 
225
241
  getValidIndex(index = this.index, prevIndex = this.prevIndex) {
226
-
227
242
  index = this.getIndex(index, prevIndex);
228
243
 
229
244
  if (!this.sets) {
@@ -233,23 +248,19 @@ export default {
233
248
  let prev;
234
249
 
235
250
  do {
236
-
237
251
  if (includes(this.sets, index)) {
238
252
  return index;
239
253
  }
240
254
 
241
255
  prev = index;
242
256
  index = this.getIndex(index + this.dir, prevIndex);
243
-
244
257
  } while (index !== prev);
245
258
 
246
259
  return index;
247
- }
248
-
249
- }
250
-
260
+ },
261
+ },
251
262
  };
252
263
 
253
264
  function getMaxElWidth(list) {
254
- return Math.max(0, ...children(list).map(el => dimensions(el).width));
265
+ return Math.max(0, ...children(list).map((el) => dimensions(el).width));
255
266
  }
@@ -1 +1 @@
1
- export {default} from './slider-parallax';
1
+ export { default } from './slider-parallax';
@@ -2,16 +2,15 @@ import Class from '../mixin/class';
2
2
  import Slideshow from '../mixin/slideshow';
3
3
  import Animations from './internal/slideshow-animations';
4
4
  import SliderReactive from '../mixin/slider-reactive';
5
- import {boxModelAdjust, css} from 'uikit-util';
5
+ import { boxModelAdjust, css } from 'uikit-util';
6
6
 
7
7
  export default {
8
-
9
8
  mixins: [Class, Slideshow, SliderReactive],
10
9
 
11
10
  props: {
12
11
  ratio: String,
13
12
  minHeight: Number,
14
- maxHeight: Number
13
+ maxHeight: Number,
15
14
  },
16
15
 
17
16
  data: {
@@ -21,20 +20,18 @@ export default {
21
20
  selList: '.uk-slideshow-items',
22
21
  attrItem: 'uk-slideshow-item',
23
22
  selNav: '.uk-slideshow-nav',
24
- Animations
23
+ Animations,
25
24
  },
26
25
 
27
26
  update: {
28
-
29
27
  read() {
30
-
31
28
  if (!this.list) {
32
29
  return false;
33
30
  }
34
31
 
35
32
  let [width, height] = this.ratio.split(':').map(Number);
36
33
 
37
- height = height * this.list.offsetWidth / width || 0;
34
+ height = (height * this.list.offsetWidth) / width || 0;
38
35
 
39
36
  if (this.minHeight) {
40
37
  height = Math.max(this.minHeight, height);
@@ -44,15 +41,13 @@ export default {
44
41
  height = Math.min(this.maxHeight, height);
45
42
  }
46
43
 
47
- return {height: height - boxModelAdjust(this.list, 'height', 'content-box')};
44
+ return { height: height - boxModelAdjust(this.list, 'height', 'content-box') };
48
45
  },
49
46
 
50
- write({height}) {
47
+ write({ height }) {
51
48
  height > 0 && css(this.list, 'minHeight', height);
52
49
  },
53
50
 
54
- events: ['resize']
55
-
56
- }
57
-
51
+ events: ['resize'],
52
+ },
58
53
  };