uikit 3.11.2-dev.0e5febb2b → 3.11.2-dev.19a21e063
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 +37 -17
- 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 +118 -201
- package/dist/css/uikit-core-rtl.min.css +1 -1
- package/dist/css/uikit-core.css +118 -201
- package/dist/css/uikit-core.min.css +1 -1
- package/dist/css/uikit-rtl.css +120 -207
- package/dist/css/uikit-rtl.min.css +1 -1
- package/dist/css/uikit.css +120 -207
- 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 +408 -439
- package/dist/js/components/filter.min.js +1 -1
- package/dist/js/components/lightbox-panel.js +1098 -1316
- package/dist/js/components/lightbox-panel.min.js +1 -1
- package/dist/js/components/lightbox.js +1144 -1393
- 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 +345 -358
- package/dist/js/components/parallax.min.js +1 -1
- package/dist/js/components/slider-parallax.js +343 -357
- package/dist/js/components/slider-parallax.min.js +1 -1
- package/dist/js/components/slider.js +768 -843
- package/dist/js/components/slider.min.js +1 -1
- package/dist/js/components/slideshow-parallax.js +343 -357
- package/dist/js/components/slideshow-parallax.min.js +1 -1
- package/dist/js/components/slideshow.js +645 -793
- package/dist/js/components/slideshow.min.js +1 -1
- package/dist/js/components/sortable.js +587 -620
- 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 +5423 -6765
- 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 +7998 -9716
- 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 +15 -28
- package/src/js/api/global.js +6 -12
- package/src/js/api/hooks.js +14 -33
- package/src/js/api/instance.js +7 -15
- package/src/js/api/state.js +65 -82
- package/src/js/components/countdown.js +24 -50
- package/src/js/components/filter.js +70 -66
- package/src/js/components/index.js +13 -13
- package/src/js/components/internal/lightbox-animations.js +14 -25
- package/src/js/components/internal/slider-preload.js +37 -0
- package/src/js/components/internal/slider-transitioner.js +66 -45
- package/src/js/components/internal/slideshow-animations.js +46 -64
- package/src/js/components/lightbox-panel.js +107 -105
- package/src/js/components/lightbox.js +17 -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 +95 -64
- package/src/js/components/slideshow-parallax.js +1 -1
- package/src/js/components/slideshow.js +15 -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 +9 -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 +47 -52
- package/src/js/core/img.js +154 -138
- 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 +49 -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 +68 -83
- package/src/js/core/switcher.js +47 -46
- package/src/js/core/tab.js +7 -10
- package/src/js/core/toggle.js +66 -67
- 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 +58 -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 +149 -106
- 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 +48 -55
- package/src/js/mixin/slideshow.js +13 -19
- package/src/js/mixin/togglable.js +89 -63
- package/src/js/uikit-core.js +2 -4
- package/src/js/uikit.js +2 -4
- package/src/js/util/ajax.js +20 -39
- package/src/js/util/animation.js +77 -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 +44 -80
- 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 +82 -121
- package/src/js/util/mouse.js +19 -17
- package/src/js/util/options.js +35 -49
- package/src/js/util/player.js +41 -36
- package/src/js/util/position.js +54 -46
- package/src/js/util/selector.js +43 -58
- package/src/js/util/style.js +39 -49
- package/src/js/util/viewport.js +75 -64
- package/src/less/components/base.less +10 -33
- package/src/less/components/flex.less +0 -9
- package/src/less/components/form-range.less +48 -95
- package/src/less/components/form.less +0 -1
- package/src/less/components/leader.less +0 -1
- package/src/less/components/lightbox.less +0 -1
- package/src/less/components/modal.less +3 -7
- package/src/less/components/navbar.less +0 -7
- package/src/less/components/progress.less +14 -36
- package/src/less/components/slider.less +0 -3
- package/src/less/components/slideshow.less +0 -3
- package/src/less/components/text.less +16 -32
- package/src/less/components/utility.less +22 -0
- package/src/scss/components/base.scss +10 -33
- package/src/scss/components/flex.scss +0 -9
- package/src/scss/components/form-range.scss +48 -95
- package/src/scss/components/form.scss +3 -4
- package/src/scss/components/icon.scss +2 -2
- package/src/scss/components/leader.scss +0 -1
- package/src/scss/components/lightbox.scss +0 -1
- package/src/scss/components/modal.scss +3 -7
- package/src/scss/components/navbar.scss +0 -7
- package/src/scss/components/progress.scss +14 -36
- package/src/scss/components/search.scss +1 -1
- package/src/scss/components/slider.scss +0 -3
- package/src/scss/components/slideshow.scss +0 -3
- package/src/scss/components/text.scss +16 -32
- package/src/scss/components/utility.scss +22 -0
- package/src/scss/mixins-theme.scss +1 -1
- package/src/scss/mixins.scss +1 -1
- package/src/scss/variables-theme.scss +9 -9
- package/src/scss/variables.scss +9 -9
- package/tests/align.html +10 -10
- package/tests/animation.html +2 -2
- package/tests/article.html +2 -2
- package/tests/base.html +3 -3
- package/tests/card.html +10 -10
- package/tests/column.html +3 -3
- package/tests/comment.html +9 -9
- package/tests/dotnav.html +3 -3
- package/tests/image.html +296 -64
- package/tests/images/image-type.avif +0 -0
- package/tests/images/image-type.jpeg +0 -0
- package/tests/images/image-type.webp +0 -0
- package/tests/index.html +8 -8
- package/tests/js/index.js +114 -85
- package/tests/lightbox.html +10 -10
- package/tests/marker.html +2 -2
- package/tests/modal.html +8 -9
- package/tests/navbar.html +2 -2
- package/tests/overlay.html +7 -7
- package/tests/parallax.html +14 -5
- package/tests/position.html +12 -12
- package/tests/slidenav.html +12 -12
- package/tests/slider.html +20 -20
- package/tests/sortable.html +1 -1
- package/tests/sticky-parallax.html +47 -62
- package/tests/svg.html +6 -6
- package/tests/table.html +11 -11
- package/tests/thumbnav.html +12 -12
- package/tests/transition.html +30 -30
- package/tests/utility.html +33 -33
- package/tests/video.html +1 -1
- package/tests/width.html +1 -1
- package/src/js/mixin/flex-bug.js +0 -56
- package/src/js/util/promise.js +0 -191
- package/tests/images/animated.gif +0 -0
package/src/js/api/state.js
CHANGED
|
@@ -1,11 +1,27 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import {
|
|
2
|
+
assign,
|
|
3
|
+
camelize,
|
|
4
|
+
data as getData,
|
|
5
|
+
hasOwn,
|
|
6
|
+
hyphenate,
|
|
7
|
+
isArray,
|
|
8
|
+
isFunction,
|
|
9
|
+
isNumeric,
|
|
10
|
+
isPlainObject,
|
|
11
|
+
isString,
|
|
12
|
+
isUndefined,
|
|
13
|
+
mergeOptions,
|
|
14
|
+
on,
|
|
15
|
+
parseOptions,
|
|
16
|
+
startsWith,
|
|
17
|
+
toBoolean,
|
|
18
|
+
toNumber,
|
|
19
|
+
} from 'uikit-util';
|
|
2
20
|
|
|
3
21
|
export default function (UIkit) {
|
|
4
|
-
|
|
5
22
|
let uid = 0;
|
|
6
23
|
|
|
7
24
|
UIkit.prototype._init = function (options) {
|
|
8
|
-
|
|
9
25
|
options = options || {};
|
|
10
26
|
options.data = normalizeData(options, this.constructor.options);
|
|
11
27
|
|
|
@@ -25,8 +41,7 @@ export default function (UIkit) {
|
|
|
25
41
|
};
|
|
26
42
|
|
|
27
43
|
UIkit.prototype._initData = function () {
|
|
28
|
-
|
|
29
|
-
const {data = {}} = this.$options;
|
|
44
|
+
const { data = {} } = this.$options;
|
|
30
45
|
|
|
31
46
|
for (const key in data) {
|
|
32
47
|
this.$props[key] = this[key] = data[key];
|
|
@@ -34,8 +49,7 @@ export default function (UIkit) {
|
|
|
34
49
|
};
|
|
35
50
|
|
|
36
51
|
UIkit.prototype._initMethods = function () {
|
|
37
|
-
|
|
38
|
-
const {methods} = this.$options;
|
|
52
|
+
const { methods } = this.$options;
|
|
39
53
|
|
|
40
54
|
if (methods) {
|
|
41
55
|
for (const key in methods) {
|
|
@@ -45,8 +59,7 @@ export default function (UIkit) {
|
|
|
45
59
|
};
|
|
46
60
|
|
|
47
61
|
UIkit.prototype._initComputeds = function () {
|
|
48
|
-
|
|
49
|
-
const {computed} = this.$options;
|
|
62
|
+
const { computed } = this.$options;
|
|
50
63
|
|
|
51
64
|
this._computeds = {};
|
|
52
65
|
|
|
@@ -58,7 +71,6 @@ export default function (UIkit) {
|
|
|
58
71
|
};
|
|
59
72
|
|
|
60
73
|
UIkit.prototype._initProps = function (props) {
|
|
61
|
-
|
|
62
74
|
let key;
|
|
63
75
|
|
|
64
76
|
props = props || getProps(this.$options, this.$name);
|
|
@@ -78,49 +90,34 @@ export default function (UIkit) {
|
|
|
78
90
|
};
|
|
79
91
|
|
|
80
92
|
UIkit.prototype._initEvents = function () {
|
|
81
|
-
|
|
82
93
|
this._events = [];
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
if (hasOwn(event, 'handler')) {
|
|
91
|
-
registerEvent(this, event);
|
|
92
|
-
} else {
|
|
93
|
-
for (const key in event) {
|
|
94
|
-
registerEvent(this, event[key], key);
|
|
95
|
-
}
|
|
94
|
+
for (const event of this.$options.events || []) {
|
|
95
|
+
if (hasOwn(event, 'handler')) {
|
|
96
|
+
registerEvent(this, event);
|
|
97
|
+
} else {
|
|
98
|
+
for (const key in event) {
|
|
99
|
+
registerEvent(this, event[key], key);
|
|
96
100
|
}
|
|
97
|
-
|
|
98
|
-
});
|
|
101
|
+
}
|
|
99
102
|
}
|
|
100
103
|
};
|
|
101
104
|
|
|
102
105
|
UIkit.prototype._unbindEvents = function () {
|
|
103
|
-
this._events.forEach(unbind => unbind());
|
|
106
|
+
this._events.forEach((unbind) => unbind());
|
|
104
107
|
delete this._events;
|
|
105
108
|
};
|
|
106
109
|
|
|
107
110
|
UIkit.prototype._initObservers = function () {
|
|
108
|
-
this._observers = [
|
|
109
|
-
initChildListObserver(this),
|
|
110
|
-
initPropsObserver(this)
|
|
111
|
-
];
|
|
111
|
+
this._observers = [initChildListObserver(this), initPropsObserver(this)];
|
|
112
112
|
};
|
|
113
113
|
|
|
114
114
|
UIkit.prototype._disconnectObservers = function () {
|
|
115
|
-
this._observers.forEach(observer =>
|
|
116
|
-
observer && observer.disconnect()
|
|
117
|
-
);
|
|
115
|
+
this._observers.forEach((observer) => observer?.disconnect());
|
|
118
116
|
};
|
|
119
117
|
|
|
120
118
|
function getProps(opts, name) {
|
|
121
|
-
|
|
122
119
|
const data = {};
|
|
123
|
-
const {args = [], props = {}, el} = opts;
|
|
120
|
+
const { args = [], props = {}, el } = opts;
|
|
124
121
|
|
|
125
122
|
if (!props) {
|
|
126
123
|
return data;
|
|
@@ -134,9 +131,7 @@ export default function (UIkit) {
|
|
|
134
131
|
continue;
|
|
135
132
|
}
|
|
136
133
|
|
|
137
|
-
value = props[key] === Boolean && value === ''
|
|
138
|
-
? true
|
|
139
|
-
: coerce(props[key], value);
|
|
134
|
+
value = props[key] === Boolean && value === '' ? true : coerce(props[key], value);
|
|
140
135
|
|
|
141
136
|
if (prop === 'target' && (!value || startsWith(value, '_'))) {
|
|
142
137
|
continue;
|
|
@@ -159,12 +154,10 @@ export default function (UIkit) {
|
|
|
159
154
|
|
|
160
155
|
function registerComputed(component, key, cb) {
|
|
161
156
|
Object.defineProperty(component, key, {
|
|
162
|
-
|
|
163
157
|
enumerable: true,
|
|
164
158
|
|
|
165
159
|
get() {
|
|
166
|
-
|
|
167
|
-
const {_computeds, $props, $el} = component;
|
|
160
|
+
const { _computeds, $props, $el } = component;
|
|
168
161
|
|
|
169
162
|
if (!hasOwn(_computeds, key)) {
|
|
170
163
|
_computeds[key] = (cb.get || cb).call(component, $props, $el);
|
|
@@ -174,36 +167,31 @@ export default function (UIkit) {
|
|
|
174
167
|
},
|
|
175
168
|
|
|
176
169
|
set(value) {
|
|
177
|
-
|
|
178
|
-
const {_computeds} = component;
|
|
170
|
+
const { _computeds } = component;
|
|
179
171
|
|
|
180
172
|
_computeds[key] = cb.set ? cb.set.call(component, value) : value;
|
|
181
173
|
|
|
182
174
|
if (isUndefined(_computeds[key])) {
|
|
183
175
|
delete _computeds[key];
|
|
184
176
|
}
|
|
185
|
-
}
|
|
186
|
-
|
|
177
|
+
},
|
|
187
178
|
});
|
|
188
179
|
}
|
|
189
180
|
|
|
190
181
|
function registerEvent(component, event, key) {
|
|
191
|
-
|
|
192
182
|
if (!isPlainObject(event)) {
|
|
193
|
-
event =
|
|
183
|
+
event = { name: key, handler: event };
|
|
194
184
|
}
|
|
195
185
|
|
|
196
|
-
let {name, el, handler, capture, passive, delegate, filter, self} = event;
|
|
197
|
-
el = isFunction(el)
|
|
198
|
-
? el.call(component)
|
|
199
|
-
: el || component.$el;
|
|
186
|
+
let { name, el, handler, capture, passive, delegate, filter, self } = event;
|
|
187
|
+
el = isFunction(el) ? el.call(component) : el || component.$el;
|
|
200
188
|
|
|
201
189
|
if (isArray(el)) {
|
|
202
|
-
el.forEach(el => registerEvent(component,
|
|
190
|
+
el.forEach((el) => registerEvent(component, { ...event, el }, key));
|
|
203
191
|
return;
|
|
204
192
|
}
|
|
205
193
|
|
|
206
|
-
if (!el || filter && !filter.call(component)) {
|
|
194
|
+
if (!el || (filter && !filter.call(component))) {
|
|
207
195
|
return;
|
|
208
196
|
}
|
|
209
197
|
|
|
@@ -211,24 +199,18 @@ export default function (UIkit) {
|
|
|
211
199
|
on(
|
|
212
200
|
el,
|
|
213
201
|
name,
|
|
214
|
-
delegate
|
|
215
|
-
? isString(delegate)
|
|
216
|
-
? delegate
|
|
217
|
-
: delegate.call(component)
|
|
218
|
-
: null,
|
|
202
|
+
delegate ? (isString(delegate) ? delegate : delegate.call(component)) : null,
|
|
219
203
|
isString(handler) ? component[handler] : handler.bind(component),
|
|
220
|
-
{passive, capture, self}
|
|
204
|
+
{ passive, capture, self }
|
|
221
205
|
)
|
|
222
206
|
);
|
|
223
|
-
|
|
224
207
|
}
|
|
225
208
|
|
|
226
209
|
function notIn(options, key) {
|
|
227
|
-
return options.every(arr => !arr || !hasOwn(arr, key));
|
|
210
|
+
return options.every((arr) => !arr || !hasOwn(arr, key));
|
|
228
211
|
}
|
|
229
212
|
|
|
230
213
|
function coerce(type, value) {
|
|
231
|
-
|
|
232
214
|
if (type === Boolean) {
|
|
233
215
|
return toBoolean(value);
|
|
234
216
|
} else if (type === Number) {
|
|
@@ -244,13 +226,13 @@ export default function (UIkit) {
|
|
|
244
226
|
return isArray(value)
|
|
245
227
|
? value
|
|
246
228
|
: isString(value)
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
229
|
+
? value
|
|
230
|
+
.split(/,(?![^(]*\))/)
|
|
231
|
+
.map((value) => (isNumeric(value) ? toNumber(value) : toBoolean(value.trim())))
|
|
232
|
+
: [value];
|
|
251
233
|
}
|
|
252
234
|
|
|
253
|
-
function normalizeData({data = {}}, {args = [], props = {}}) {
|
|
235
|
+
function normalizeData({ data = {} }, { args = [], props = {} }) {
|
|
254
236
|
if (isArray(data)) {
|
|
255
237
|
data = data.slice(0, args.length).reduce((data, value, index) => {
|
|
256
238
|
if (isPlainObject(value)) {
|
|
@@ -274,44 +256,45 @@ export default function (UIkit) {
|
|
|
274
256
|
}
|
|
275
257
|
|
|
276
258
|
function initChildListObserver(component) {
|
|
277
|
-
const {el} = component.$options;
|
|
259
|
+
const { el } = component.$options;
|
|
278
260
|
|
|
279
261
|
const observer = new MutationObserver(() => component.$emit());
|
|
280
262
|
observer.observe(el, {
|
|
281
263
|
childList: true,
|
|
282
|
-
subtree: true
|
|
264
|
+
subtree: true,
|
|
283
265
|
});
|
|
284
266
|
|
|
285
267
|
return observer;
|
|
286
268
|
}
|
|
287
269
|
|
|
288
270
|
function initPropsObserver(component) {
|
|
289
|
-
|
|
290
|
-
const {
|
|
291
|
-
const {attrs, props, el} = $options;
|
|
271
|
+
const { $name, $options, $props } = component;
|
|
272
|
+
const { attrs, props, el } = $options;
|
|
292
273
|
|
|
293
274
|
if (!props || attrs === false) {
|
|
294
275
|
return;
|
|
295
276
|
}
|
|
296
277
|
|
|
297
278
|
const attributes = isArray(attrs) ? attrs : Object.keys(props);
|
|
298
|
-
const filter = attributes.map(key => hyphenate(key)).concat($name);
|
|
279
|
+
const filter = attributes.map((key) => hyphenate(key)).concat($name);
|
|
299
280
|
|
|
300
|
-
const observer = new MutationObserver(records => {
|
|
281
|
+
const observer = new MutationObserver((records) => {
|
|
301
282
|
const data = getProps($options, $name);
|
|
302
|
-
if (
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
283
|
+
if (
|
|
284
|
+
records.some(({ attributeName }) => {
|
|
285
|
+
const prop = attributeName.replace('data-', '');
|
|
286
|
+
return (
|
|
287
|
+
prop === $name ? attributes : [camelize(prop), camelize(attributeName)]
|
|
288
|
+
).some((prop) => !isUndefined(data[prop]) && data[prop] !== $props[prop]);
|
|
289
|
+
})
|
|
290
|
+
) {
|
|
308
291
|
component.$reset();
|
|
309
292
|
}
|
|
310
293
|
});
|
|
311
294
|
|
|
312
295
|
observer.observe(el, {
|
|
313
296
|
attributes: true,
|
|
314
|
-
attributeFilter: filter.concat(filter.map(key => `data-${key}`))
|
|
297
|
+
attributeFilter: filter.concat(filter.map((key) => `data-${key}`)),
|
|
315
298
|
});
|
|
316
299
|
|
|
317
300
|
return observer;
|
|
@@ -1,46 +1,43 @@
|
|
|
1
1
|
import Class from '../mixin/class';
|
|
2
|
-
import {$, empty, html} from 'uikit-util';
|
|
2
|
+
import { $, empty, html } from 'uikit-util';
|
|
3
3
|
|
|
4
4
|
export default {
|
|
5
|
-
|
|
6
5
|
mixins: [Class],
|
|
7
6
|
|
|
8
7
|
props: {
|
|
9
8
|
date: String,
|
|
10
|
-
clsWrapper: String
|
|
9
|
+
clsWrapper: String,
|
|
11
10
|
},
|
|
12
11
|
|
|
13
12
|
data: {
|
|
14
13
|
date: '',
|
|
15
|
-
clsWrapper: '.uk-countdown-%unit%'
|
|
14
|
+
clsWrapper: '.uk-countdown-%unit%',
|
|
16
15
|
},
|
|
17
16
|
|
|
18
17
|
computed: {
|
|
19
|
-
|
|
20
|
-
date({date}) {
|
|
18
|
+
date({ date }) {
|
|
21
19
|
return Date.parse(date);
|
|
22
20
|
},
|
|
23
21
|
|
|
24
|
-
days({clsWrapper}, $el) {
|
|
22
|
+
days({ clsWrapper }, $el) {
|
|
25
23
|
return $(clsWrapper.replace('%unit%', 'days'), $el);
|
|
26
24
|
},
|
|
27
25
|
|
|
28
|
-
hours({clsWrapper}, $el) {
|
|
26
|
+
hours({ clsWrapper }, $el) {
|
|
29
27
|
return $(clsWrapper.replace('%unit%', 'hours'), $el);
|
|
30
28
|
},
|
|
31
29
|
|
|
32
|
-
minutes({clsWrapper}, $el) {
|
|
30
|
+
minutes({ clsWrapper }, $el) {
|
|
33
31
|
return $(clsWrapper.replace('%unit%', 'minutes'), $el);
|
|
34
32
|
},
|
|
35
33
|
|
|
36
|
-
seconds({clsWrapper}, $el) {
|
|
34
|
+
seconds({ clsWrapper }, $el) {
|
|
37
35
|
return $(clsWrapper.replace('%unit%', 'seconds'), $el);
|
|
38
36
|
},
|
|
39
37
|
|
|
40
38
|
units() {
|
|
41
|
-
return ['days', 'hours', 'minutes', 'seconds'].filter(unit => this[unit]);
|
|
42
|
-
}
|
|
43
|
-
|
|
39
|
+
return ['days', 'hours', 'minutes', 'seconds'].filter((unit) => this[unit]);
|
|
40
|
+
},
|
|
44
41
|
},
|
|
45
42
|
|
|
46
43
|
connected() {
|
|
@@ -49,13 +46,11 @@ export default {
|
|
|
49
46
|
|
|
50
47
|
disconnected() {
|
|
51
48
|
this.stop();
|
|
52
|
-
this.units.forEach(unit => empty(this[unit]));
|
|
49
|
+
this.units.forEach((unit) => empty(this[unit]));
|
|
53
50
|
},
|
|
54
51
|
|
|
55
52
|
events: [
|
|
56
|
-
|
|
57
53
|
{
|
|
58
|
-
|
|
59
54
|
name: 'visibilitychange',
|
|
60
55
|
|
|
61
56
|
el() {
|
|
@@ -68,31 +63,21 @@ export default {
|
|
|
68
63
|
} else {
|
|
69
64
|
this.start();
|
|
70
65
|
}
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
}
|
|
74
|
-
|
|
66
|
+
},
|
|
67
|
+
},
|
|
75
68
|
],
|
|
76
69
|
|
|
77
70
|
update: {
|
|
78
|
-
|
|
79
71
|
write() {
|
|
80
|
-
|
|
81
72
|
const timespan = getTimeSpan(this.date);
|
|
82
73
|
|
|
83
74
|
if (timespan.total <= 0) {
|
|
84
|
-
|
|
85
75
|
this.stop();
|
|
86
76
|
|
|
87
|
-
timespan.days
|
|
88
|
-
= timespan.hours
|
|
89
|
-
= timespan.minutes
|
|
90
|
-
= timespan.seconds
|
|
91
|
-
= 0;
|
|
77
|
+
timespan.days = timespan.hours = timespan.minutes = timespan.seconds = 0;
|
|
92
78
|
}
|
|
93
79
|
|
|
94
|
-
this.units
|
|
95
|
-
|
|
80
|
+
for (const unit of this.units) {
|
|
96
81
|
let digits = String(Math.floor(timespan[unit]));
|
|
97
82
|
|
|
98
83
|
digits = digits.length < 2 ? `0${digits}` : digits;
|
|
@@ -105,50 +90,39 @@ export default {
|
|
|
105
90
|
html(el, digits.map(() => '<span></span>').join(''));
|
|
106
91
|
}
|
|
107
92
|
|
|
108
|
-
digits.forEach((digit, i) => el.children[i].textContent = digit);
|
|
93
|
+
digits.forEach((digit, i) => (el.children[i].textContent = digit));
|
|
109
94
|
}
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
}
|
|
114
|
-
|
|
95
|
+
}
|
|
96
|
+
},
|
|
115
97
|
},
|
|
116
98
|
|
|
117
99
|
methods: {
|
|
118
|
-
|
|
119
100
|
start() {
|
|
120
|
-
|
|
121
101
|
this.stop();
|
|
122
102
|
|
|
123
103
|
if (this.date && this.units.length) {
|
|
124
104
|
this.$update();
|
|
125
105
|
this.timer = setInterval(this.$update, 1000);
|
|
126
106
|
}
|
|
127
|
-
|
|
128
107
|
},
|
|
129
108
|
|
|
130
109
|
stop() {
|
|
131
|
-
|
|
132
110
|
if (this.timer) {
|
|
133
111
|
clearInterval(this.timer);
|
|
134
112
|
this.timer = null;
|
|
135
113
|
}
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
}
|
|
140
|
-
|
|
114
|
+
},
|
|
115
|
+
},
|
|
141
116
|
};
|
|
142
117
|
|
|
143
118
|
function getTimeSpan(date) {
|
|
144
|
-
|
|
145
119
|
const total = date - Date.now();
|
|
146
120
|
|
|
147
121
|
return {
|
|
148
122
|
total,
|
|
149
|
-
seconds: total / 1000 % 60,
|
|
150
|
-
minutes: total / 1000 / 60 % 60,
|
|
151
|
-
hours: total / 1000 / 60 / 60 % 24,
|
|
152
|
-
days: total / 1000 / 60 / 60 / 24
|
|
123
|
+
seconds: (total / 1000) % 60,
|
|
124
|
+
minutes: (total / 1000 / 60) % 60,
|
|
125
|
+
hours: (total / 1000 / 60 / 60) % 24,
|
|
126
|
+
days: total / 1000 / 60 / 60 / 24,
|
|
153
127
|
};
|
|
154
128
|
}
|