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.
- package/.eslintrc.json +4 -49
- package/.prettierignore +14 -0
- package/.prettierrc.json +13 -0
- package/.webstorm.js +3 -3
- package/CHANGELOG.md +7 -11
- package/build/.eslintrc.json +1 -3
- package/build/build.js +26 -28
- package/build/icons.js +7 -11
- package/build/less.js +48 -36
- package/build/package.json +2 -2
- package/build/prefix.js +21 -18
- package/build/publishDev.js +6 -8
- package/build/release.js +20 -17
- package/build/scope.js +21 -11
- package/build/scss.js +72 -39
- package/build/util.js +71 -62
- package/build/wrapper/icons.js +0 -2
- package/dist/css/uikit-core-rtl.css +42 -17
- package/dist/css/uikit-core-rtl.min.css +1 -1
- package/dist/css/uikit-core.css +42 -17
- package/dist/css/uikit-core.min.css +1 -1
- package/dist/css/uikit-rtl.css +42 -17
- package/dist/css/uikit-rtl.min.css +1 -1
- package/dist/css/uikit.css +42 -17
- package/dist/css/uikit.min.css +1 -1
- package/dist/js/components/countdown.js +88 -133
- package/dist/js/components/countdown.min.js +1 -1
- package/dist/js/components/filter.js +409 -438
- package/dist/js/components/filter.min.js +1 -1
- package/dist/js/components/lightbox-panel.js +1116 -1305
- package/dist/js/components/lightbox-panel.min.js +1 -1
- package/dist/js/components/lightbox.js +1164 -1383
- package/dist/js/components/lightbox.min.js +1 -1
- package/dist/js/components/notification.js +94 -114
- package/dist/js/components/notification.min.js +1 -1
- package/dist/js/components/parallax.js +294 -345
- package/dist/js/components/parallax.min.js +1 -1
- package/dist/js/components/slider-parallax.js +292 -344
- package/dist/js/components/slider-parallax.min.js +1 -1
- package/dist/js/components/slider.js +727 -850
- package/dist/js/components/slider.min.js +1 -1
- package/dist/js/components/slideshow-parallax.js +292 -344
- package/dist/js/components/slideshow-parallax.min.js +1 -1
- package/dist/js/components/slideshow.js +615 -799
- package/dist/js/components/slideshow.min.js +1 -1
- package/dist/js/components/sortable.js +588 -619
- package/dist/js/components/sortable.min.js +1 -1
- package/dist/js/components/tooltip.js +324 -356
- package/dist/js/components/tooltip.min.js +1 -1
- package/dist/js/components/upload.js +155 -167
- package/dist/js/components/upload.min.js +1 -1
- package/dist/js/uikit-core.js +5266 -6572
- package/dist/js/uikit-core.min.js +1 -1
- package/dist/js/uikit-icons.js +7 -9
- package/dist/js/uikit-icons.min.js +1 -1
- package/dist/js/uikit.js +8126 -9876
- package/dist/js/uikit.min.js +1 -1
- package/jsconfig.json +1 -1
- package/package.json +64 -60
- package/src/js/api/boot.js +25 -32
- package/src/js/api/component.js +23 -27
- package/src/js/api/global.js +6 -12
- package/src/js/api/hooks.js +13 -32
- package/src/js/api/instance.js +7 -15
- package/src/js/api/state.js +79 -100
- package/src/js/components/countdown.js +24 -50
- package/src/js/components/filter.js +71 -66
- package/src/js/components/index.js +13 -13
- package/src/js/components/internal/lightbox-animations.js +11 -23
- package/src/js/components/internal/slider-transitioner.js +66 -45
- package/src/js/components/internal/slideshow-animations.js +42 -61
- package/src/js/components/lightbox-panel.js +135 -109
- package/src/js/components/lightbox.js +18 -39
- package/src/js/components/notification.js +49 -43
- package/src/js/components/parallax.js +16 -30
- package/src/js/components/slider-parallax.js +13 -23
- package/src/js/components/slider.js +75 -64
- package/src/js/components/slideshow-parallax.js +1 -1
- package/src/js/components/slideshow.js +8 -13
- package/src/js/components/sortable.js +125 -106
- package/src/js/components/tooltip.js +41 -31
- package/src/js/components/upload.js +52 -63
- package/src/js/core/accordion.js +53 -48
- package/src/js/core/alert.js +10 -17
- package/src/js/core/core.js +74 -53
- package/src/js/core/cover.js +11 -15
- package/src/js/core/drop.js +106 -92
- package/src/js/core/form-custom.js +20 -25
- package/src/js/core/gif.js +3 -7
- package/src/js/core/grid.js +57 -58
- package/src/js/core/height-match.js +16 -29
- package/src/js/core/height-viewport.js +28 -35
- package/src/js/core/icon.js +38 -50
- package/src/js/core/img.js +130 -105
- package/src/js/core/index.js +39 -39
- package/src/js/core/leader.js +9 -18
- package/src/js/core/margin.js +21 -37
- package/src/js/core/modal.js +50 -36
- package/src/js/core/nav.js +2 -4
- package/src/js/core/navbar.js +112 -88
- package/src/js/core/offcanvas.js +49 -53
- package/src/js/core/overflow-auto.js +13 -17
- package/src/js/core/responsive.js +14 -12
- package/src/js/core/scroll.js +10 -20
- package/src/js/core/scrollspy-nav.js +34 -31
- package/src/js/core/scrollspy.js +37 -54
- package/src/js/core/sticky.js +130 -91
- package/src/js/core/svg.js +60 -79
- package/src/js/core/switcher.js +47 -46
- package/src/js/core/tab.js +7 -10
- package/src/js/core/toggle.js +64 -66
- package/src/js/core/video.js +11 -22
- package/src/js/mixin/animate.js +19 -20
- package/src/js/mixin/class.js +2 -4
- package/src/js/mixin/container.js +7 -11
- package/src/js/mixin/internal/animate-fade.js +73 -30
- package/src/js/mixin/internal/animate-slide.js +61 -41
- package/src/js/mixin/internal/slideshow-animations.js +7 -14
- package/src/js/mixin/internal/slideshow-transitioner.js +10 -17
- package/src/js/mixin/media.js +5 -10
- package/src/js/mixin/modal.js +89 -66
- package/src/js/mixin/parallax.js +53 -48
- package/src/js/mixin/position.js +26 -20
- package/src/js/mixin/slider-autoplay.js +12 -21
- package/src/js/mixin/slider-drag.js +64 -65
- package/src/js/mixin/slider-nav.js +26 -35
- package/src/js/mixin/slider-reactive.js +2 -8
- package/src/js/mixin/slider.js +51 -50
- package/src/js/mixin/slideshow.js +13 -19
- package/src/js/mixin/togglable.js +90 -63
- package/src/js/uikit-core.js +2 -4
- package/src/js/uikit.js +2 -4
- package/src/js/util/ajax.js +27 -43
- package/src/js/util/animation.js +82 -75
- package/src/js/util/attr.js +17 -21
- package/src/js/util/class.js +14 -52
- package/src/js/util/dimensions.js +56 -43
- package/src/js/util/dom.js +40 -73
- package/src/js/util/env.js +7 -12
- package/src/js/util/event.js +60 -59
- package/src/js/util/fastdom.js +1 -6
- package/src/js/util/filter.js +17 -34
- package/src/js/util/index.js +0 -1
- package/src/js/util/lang.js +79 -119
- package/src/js/util/mouse.js +19 -17
- package/src/js/util/options.js +42 -47
- package/src/js/util/player.js +40 -36
- package/src/js/util/position.js +54 -46
- package/src/js/util/promise.js +0 -191
- package/src/js/util/selector.js +39 -48
- package/src/js/util/style.js +36 -46
- package/src/js/util/viewport.js +75 -64
- package/src/less/components/flex.less +0 -9
- package/src/less/components/navbar.less +0 -7
- package/src/less/components/utility.less +22 -0
- package/src/scss/components/flex.scss +0 -9
- package/src/scss/components/form.scss +3 -3
- package/src/scss/components/icon.scss +2 -2
- package/src/scss/components/navbar.scss +0 -7
- package/src/scss/components/search.scss +1 -1
- package/src/scss/components/utility.scss +22 -0
- package/src/scss/variables-theme.scss +6 -6
- package/src/scss/variables.scss +6 -6
- package/tests/image.html +38 -22
- package/tests/js/index.js +114 -85
- package/src/js/mixin/flex-bug.js +0 -56
- package/tests/images/test.avif +0 -0
- 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 {
|
|
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
|
|
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 (
|
|
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
|
|
133
|
+
for (const el of this.navItems) {
|
|
125
134
|
const index = toNumber(data(el, this.attrItem));
|
|
126
135
|
if (index !== false) {
|
|
127
|
-
el.hidden =
|
|
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
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
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
|
-
|
|
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
|
-
|
|
159
|
-
|
|
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 =
|
|
173
|
-
|
|
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(
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
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
|
};
|