Skip to content

Commit 396672c

Browse files
nVitiusnVitius
committed
fix: use name to select spinner
1 parent fa1f0d5 commit 396672c

File tree

4 files changed

+30
-74
lines changed

4 files changed

+30
-74
lines changed

‎dist/vue-infinite-loading.esm.js‎

Lines changed: 13 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -83,16 +83,15 @@ var script$1 = /* #__PURE__ */defineComponent({
8383
props: ['spinner'],
8484
computed: {
8585
spinnerView() {
86-
return SPINNERS[this.spinner || ''] || 'default' // fallback to spinner of config
87-
;
86+
return !SPINNERS.includes(this.spinner) ? 'default' : this.spinner;
8887
}
8988

9089
}
9190
});
9291

93-
const _withId$1 = /*#__PURE__*/withScopeId("data-v-10593c59");
92+
const _withId$1 = /*#__PURE__*/withScopeId("data-v-18ae5a62");
9493

95-
pushScopeId("data-v-10593c59");
94+
pushScopeId("data-v-18ae5a62");
9695

9796
const _hoisted_1$1 = {
9897
key: 0,
@@ -163,11 +162,11 @@ function styleInject(css, ref) {
163162
}
164163
}
165164

166-
var css_248z$1 = ".loading-wave-dots[data-v-10593c59] {\n position: relative;\n}\n.loading-wave-dots[data-v-10593c59] .wave-item {\n position: absolute;\n top: 50%;\n left: 50%;\n display: inline-block;\n margin-top: -8px/2;\n width: 8px;\n height: 8px;\n border-radius: 50%;\n animation: loading-wave-dots-10593c59 linear 2.8s infinite;\n}\n.loading-wave-dots[data-v-10593c59] .wave-item:first-child {\n margin-left: -8px/2 + -32px;\n}\n.loading-wave-dots[data-v-10593c59] .wave-item:nth-child(2) {\n margin-left: -8px/2 + -16px;\n animation-delay: 0.14s;\n}\n.loading-wave-dots[data-v-10593c59] .wave-item:nth-child(3) {\n margin-left: -8px/2;\n animation-delay: 0.28s;\n}\n.loading-wave-dots[data-v-10593c59] .wave-item:nth-child(4) {\n margin-left: -8px/2 + 16px;\n animation-delay: 0.42s;\n}\n.loading-wave-dots[data-v-10593c59] .wave-item:last-child {\n margin-left: -8px/2 + 32px;\n animation-delay: 0.56s;\n}\n@keyframes loading-wave-dots-10593c59 {\n0% {\n transform: translateY(0);\n background: #bbb;\n}\n10% {\n transform: translateY(-6px);\n background: #999;\n}\n20% {\n transform: translateY(0);\n background: #bbb;\n}\n100% {\n transform: translateY(0);\n background: #bbb;\n}\n}\n.loading-circles[data-v-10593c59] .circle-item {\n width: 5px;\n height: 5px;\n animation: loading-circles-10593c59 linear 0.75s infinite;\n}\n.loading-circles[data-v-10593c59] .circle-item:first-child {\n margin-top: -5px/2 + -12px;\n margin-left: -5px/2;\n}\n.loading-circles[data-v-10593c59] .circle-item:nth-child(2) {\n margin-top: -5px/2 + -8.76px;\n margin-left: -5px/2 + 8.76px;\n}\n.loading-circles[data-v-10593c59] .circle-item:nth-child(3) {\n margin-top: -5px/2;\n margin-left: -5px/2 + 12px;\n}\n.loading-circles[data-v-10593c59] .circle-item:nth-child(4) {\n margin-top: -5px/2 + 8.76px;\n margin-left: -5px/2 + 8.76px;\n}\n.loading-circles[data-v-10593c59] .circle-item:nth-child(5) {\n margin-top: -5px/2 + 12px;\n margin-left: -5px/2;\n}\n.loading-circles[data-v-10593c59] .circle-item:nth-child(6) {\n margin-top: -5px/2 + 8.76px;\n margin-left: -5px/2 + -8.76px;\n}\n.loading-circles[data-v-10593c59] .circle-item:nth-child(7) {\n margin-top: -5px/2;\n margin-left: -5px/2 + -12px;\n}\n.loading-circles[data-v-10593c59] .circle-item:last-child {\n margin-top: -5px/2 + -8.76px;\n margin-left: -5px/2 + -8.76px;\n}\n@keyframes loading-circles-10593c59 {\n0% {\n background: #dfdfdf;\n}\n90% {\n background: #505050;\n}\n100% {\n background: #dfdfdf;\n}\n}\n.loading-bubbles[data-v-10593c59] .bubble-item {\n background: #666;\n animation: loading-bubbles-10593c59 linear 0.75s infinite;\n}\n.loading-bubbles[data-v-10593c59] .bubble-item:first-child {\n margin-top: -1px/2 + -12px;\n margin-left: -1px/2;\n}\n.loading-bubbles[data-v-10593c59] .bubble-item:nth-child(2) {\n margin-top: -1px/2 + -8.76px;\n margin-left: -1px/2 + 8.76px;\n}\n.loading-bubbles[data-v-10593c59] .bubble-item:nth-child(3) {\n margin-top: -1px/2;\n margin-left: -1px/2 + 12px;\n}\n.loading-bubbles[data-v-10593c59] .bubble-item:nth-child(4) {\n margin-top: -1px/2 + 8.76px;\n margin-left: -1px/2 + 8.76px;\n}\n.loading-bubbles[data-v-10593c59] .bubble-item:nth-child(5) {\n margin-top: -1px/2 + 12px;\n margin-left: -1px/2;\n}\n.loading-bubbles[data-v-10593c59] .bubble-item:nth-child(6) {\n margin-top: -1px/2 + 8.76px;\n margin-left: -1px/2 + -8.76px;\n}\n.loading-bubbles[data-v-10593c59] .bubble-item:nth-child(7) {\n margin-top: -1px/2;\n margin-left: -1px/2 + -12px;\n}\n.loading-bubbles[data-v-10593c59] .bubble-item:last-child {\n margin-top: -1px/2 + -8.76px;\n margin-left: -1px/2 + -8.76px;\n}\n@keyframes loading-bubbles-10593c59 {\n0% {\n width: 1px;\n height: 1px;\n box-shadow: 0 0 0 3px #666;\n}\n90% {\n width: 1px;\n height: 1px;\n box-shadow: 0 0 0 0 #666;\n}\n100% {\n width: 1px;\n height: 1px;\n box-shadow: 0 0 0 3px #666;\n}\n}\n.loading-default[data-v-10593c59] {\n position: relative;\n border: 1px solid #999;\n animation: loading-rotating-10593c59 ease 1.5s infinite;\n}\n.loading-default[data-v-10593c59]:before {\n content: '';\n position: absolute;\n display: block;\n top: 0;\n left: 50%;\n margin-top: -6px/2;\n margin-left: -6px/2;\n width: 6px;\n height: 6px;\n background-color: #999;\n border-radius: 50%;\n}\n.loading-spiral[data-v-10593c59] {\n border: 2px solid #777;\n border-right-color: transparent;\n animation: loading-rotating-10593c59 linear 0.85s infinite;\n}\n@keyframes loading-rotating-10593c59 {\n0% {\n transform: rotate(0);\n}\n100% {\n transform: rotate(360deg);\n}\n}\n.loading-bubbles[data-v-10593c59],\n.loading-circles[data-v-10593c59] {\n position: relative;\n}\n.loading-circles[data-v-10593c59] .circle-item,\n.loading-bubbles[data-v-10593c59] .bubble-item {\n position: absolute;\n top: 50%;\n left: 50%;\n display: inline-block;\n border-radius: 50%;\n}\n.loading-circles[data-v-10593c59] .circle-item:nth-child(2),\n.loading-bubbles[data-v-10593c59] .bubble-item:nth-child(2) {\n animation-delay: 0.093s;\n}\n.loading-circles[data-v-10593c59] .circle-item:nth-child(3),\n.loading-bubbles[data-v-10593c59] .bubble-item:nth-child(3) {\n animation-delay: 0.186s;\n}\n.loading-circles[data-v-10593c59] .circle-item:nth-child(4),\n.loading-bubbles[data-v-10593c59] .bubble-item:nth-child(4) {\n animation-delay: 0.279s;\n}\n.loading-circles[data-v-10593c59] .circle-item:nth-child(5),\n.loading-bubbles[data-v-10593c59] .bubble-item:nth-child(5) {\n animation-delay: 0.372s;\n}\n.loading-circles[data-v-10593c59] .circle-item:nth-child(6),\n.loading-bubbles[data-v-10593c59] .bubble-item:nth-child(6) {\n animation-delay: 0.465s;\n}\n.loading-circles[data-v-10593c59] .circle-item:nth-child(7),\n.loading-bubbles[data-v-10593c59] .bubble-item:nth-child(7) {\n animation-delay: 0.558s;\n}\n.loading-circles[data-v-10593c59] .circle-item:last-child,\n.loading-bubbles[data-v-10593c59] .bubble-item:last-child {\n animation-delay: 0.651s;\n}\n";
165+
var css_248z$1 = ".loading-wave-dots[data-v-18ae5a62] {\n position: relative;\n}\n.loading-wave-dots[data-v-18ae5a62] .wave-item {\n position: absolute;\n top: 50%;\n left: 50%;\n display: inline-block;\n margin-top: -8px/2;\n width: 8px;\n height: 8px;\n border-radius: 50%;\n animation: loading-wave-dots-18ae5a62 linear 2.8s infinite;\n}\n.loading-wave-dots[data-v-18ae5a62] .wave-item:first-child {\n margin-left: -8px/2 + -32px;\n}\n.loading-wave-dots[data-v-18ae5a62] .wave-item:nth-child(2) {\n margin-left: -8px/2 + -16px;\n animation-delay: 0.14s;\n}\n.loading-wave-dots[data-v-18ae5a62] .wave-item:nth-child(3) {\n margin-left: -8px/2;\n animation-delay: 0.28s;\n}\n.loading-wave-dots[data-v-18ae5a62] .wave-item:nth-child(4) {\n margin-left: -8px/2 + 16px;\n animation-delay: 0.42s;\n}\n.loading-wave-dots[data-v-18ae5a62] .wave-item:last-child {\n margin-left: -8px/2 + 32px;\n animation-delay: 0.56s;\n}\n@keyframes loading-wave-dots-18ae5a62 {\n0% {\n transform: translateY(0);\n background: #bbb;\n}\n10% {\n transform: translateY(-6px);\n background: #999;\n}\n20% {\n transform: translateY(0);\n background: #bbb;\n}\n100% {\n transform: translateY(0);\n background: #bbb;\n}\n}\n.loading-circles[data-v-18ae5a62] .circle-item {\n width: 5px;\n height: 5px;\n animation: loading-circles-18ae5a62 linear 0.75s infinite;\n}\n.loading-circles[data-v-18ae5a62] .circle-item:first-child {\n margin-top: -5px/2 + -12px;\n margin-left: -5px/2;\n}\n.loading-circles[data-v-18ae5a62] .circle-item:nth-child(2) {\n margin-top: -5px/2 + -8.76px;\n margin-left: -5px/2 + 8.76px;\n}\n.loading-circles[data-v-18ae5a62] .circle-item:nth-child(3) {\n margin-top: -5px/2;\n margin-left: -5px/2 + 12px;\n}\n.loading-circles[data-v-18ae5a62] .circle-item:nth-child(4) {\n margin-top: -5px/2 + 8.76px;\n margin-left: -5px/2 + 8.76px;\n}\n.loading-circles[data-v-18ae5a62] .circle-item:nth-child(5) {\n margin-top: -5px/2 + 12px;\n margin-left: -5px/2;\n}\n.loading-circles[data-v-18ae5a62] .circle-item:nth-child(6) {\n margin-top: -5px/2 + 8.76px;\n margin-left: -5px/2 + -8.76px;\n}\n.loading-circles[data-v-18ae5a62] .circle-item:nth-child(7) {\n margin-top: -5px/2;\n margin-left: -5px/2 + -12px;\n}\n.loading-circles[data-v-18ae5a62] .circle-item:last-child {\n margin-top: -5px/2 + -8.76px;\n margin-left: -5px/2 + -8.76px;\n}\n@keyframes loading-circles-18ae5a62 {\n0% {\n background: #dfdfdf;\n}\n90% {\n background: #505050;\n}\n100% {\n background: #dfdfdf;\n}\n}\n.loading-bubbles[data-v-18ae5a62] .bubble-item {\n background: #666;\n animation: loading-bubbles-18ae5a62 linear 0.75s infinite;\n}\n.loading-bubbles[data-v-18ae5a62] .bubble-item:first-child {\n margin-top: -1px/2 + -12px;\n margin-left: -1px/2;\n}\n.loading-bubbles[data-v-18ae5a62] .bubble-item:nth-child(2) {\n margin-top: -1px/2 + -8.76px;\n margin-left: -1px/2 + 8.76px;\n}\n.loading-bubbles[data-v-18ae5a62] .bubble-item:nth-child(3) {\n margin-top: -1px/2;\n margin-left: -1px/2 + 12px;\n}\n.loading-bubbles[data-v-18ae5a62] .bubble-item:nth-child(4) {\n margin-top: -1px/2 + 8.76px;\n margin-left: -1px/2 + 8.76px;\n}\n.loading-bubbles[data-v-18ae5a62] .bubble-item:nth-child(5) {\n margin-top: -1px/2 + 12px;\n margin-left: -1px/2;\n}\n.loading-bubbles[data-v-18ae5a62] .bubble-item:nth-child(6) {\n margin-top: -1px/2 + 8.76px;\n margin-left: -1px/2 + -8.76px;\n}\n.loading-bubbles[data-v-18ae5a62] .bubble-item:nth-child(7) {\n margin-top: -1px/2;\n margin-left: -1px/2 + -12px;\n}\n.loading-bubbles[data-v-18ae5a62] .bubble-item:last-child {\n margin-top: -1px/2 + -8.76px;\n margin-left: -1px/2 + -8.76px;\n}\n@keyframes loading-bubbles-18ae5a62 {\n0% {\n width: 1px;\n height: 1px;\n box-shadow: 0 0 0 3px #666;\n}\n90% {\n width: 1px;\n height: 1px;\n box-shadow: 0 0 0 0 #666;\n}\n100% {\n width: 1px;\n height: 1px;\n box-shadow: 0 0 0 3px #666;\n}\n}\n.loading-default[data-v-18ae5a62] {\n position: relative;\n border: 1px solid #999;\n animation: loading-rotating-18ae5a62 ease 1.5s infinite;\n}\n.loading-default[data-v-18ae5a62]:before {\n content: '';\n position: absolute;\n display: block;\n top: 0;\n left: 50%;\n margin-top: -6px/2;\n margin-left: -6px/2;\n width: 6px;\n height: 6px;\n background-color: #999;\n border-radius: 50%;\n}\n.loading-spiral[data-v-18ae5a62] {\n border: 2px solid #777;\n border-right-color: transparent;\n animation: loading-rotating-18ae5a62 linear 0.85s infinite;\n}\n@keyframes loading-rotating-18ae5a62 {\n0% {\n transform: rotate(0);\n}\n100% {\n transform: rotate(360deg);\n}\n}\n.loading-bubbles[data-v-18ae5a62],\n.loading-circles[data-v-18ae5a62] {\n position: relative;\n}\n.loading-circles[data-v-18ae5a62] .circle-item,\n.loading-bubbles[data-v-18ae5a62] .bubble-item {\n position: absolute;\n top: 50%;\n left: 50%;\n display: inline-block;\n border-radius: 50%;\n}\n.loading-circles[data-v-18ae5a62] .circle-item:nth-child(2),\n.loading-bubbles[data-v-18ae5a62] .bubble-item:nth-child(2) {\n animation-delay: 0.093s;\n}\n.loading-circles[data-v-18ae5a62] .circle-item:nth-child(3),\n.loading-bubbles[data-v-18ae5a62] .bubble-item:nth-child(3) {\n animation-delay: 0.186s;\n}\n.loading-circles[data-v-18ae5a62] .circle-item:nth-child(4),\n.loading-bubbles[data-v-18ae5a62] .bubble-item:nth-child(4) {\n animation-delay: 0.279s;\n}\n.loading-circles[data-v-18ae5a62] .circle-item:nth-child(5),\n.loading-bubbles[data-v-18ae5a62] .bubble-item:nth-child(5) {\n animation-delay: 0.372s;\n}\n.loading-circles[data-v-18ae5a62] .circle-item:nth-child(6),\n.loading-bubbles[data-v-18ae5a62] .bubble-item:nth-child(6) {\n animation-delay: 0.465s;\n}\n.loading-circles[data-v-18ae5a62] .circle-item:nth-child(7),\n.loading-bubbles[data-v-18ae5a62] .bubble-item:nth-child(7) {\n animation-delay: 0.558s;\n}\n.loading-circles[data-v-18ae5a62] .circle-item:last-child,\n.loading-bubbles[data-v-18ae5a62] .bubble-item:last-child {\n animation-delay: 0.651s;\n}\n";
167166
styleInject(css_248z$1);
168167

169168
script$1.render = render$1;
170-
script$1.__scopeId = "data-v-10593c59";
169+
script$1.__scopeId = "data-v-18ae5a62";
171170

172171
/*
173172
* default property values
@@ -234,22 +233,7 @@ const evt3rdArg = (() => {
234233
*/
235234

236235
const WARNINGS = {
237-
STATE_CHANGER: ['emit `loaded` and `complete` event through component instance of `$refs` may cause error, so it will be deprecated soon, please use the `$state` argument instead (`$state` just the special `$event` variable):', '\ntemplate:', '<infinite-loading @infinite="infiniteHandler"></infinite-loading>', `
238-
script:
239-
...
240-
infiniteHandler($state) {
241-
ajax('https://www.example.com/api/news')
242-
.then((res) => {
243-
if (res.data.length) {
244-
$state.loaded();
245-
} else {
246-
$state.complete();
247-
}
248-
});
249-
}
250-
...`, '', 'more details: https://github.com/PeachScript/vue-infinite-loading/issues/57#issuecomment-324370549'].join('\n'),
251-
INFINITE_EVENT: '`:on-infinite` property will be deprecated soon, please use `@infinite` event instead.',
252-
IDENTIFIER: 'the `reset` event will be deprecated soon, please reset this component by change the `identifier` property.'
236+
INFINITE_EVENT: '`:on-infinite` property will be deprecated soon, please use `@infinite` event instead.'
253237
};
254238
/**
255239
* error messages
@@ -518,7 +502,7 @@ var script = /* #__PURE__ */defineComponent({
518502
this.scrollHandler();
519503
this.scrollParent.addEventListener('scroll', this.scrollHandler, evt3rdArg);
520504
}, 1);
521-
eventHub.$on('$InfiniteLoading:loaded', ev => {
505+
eventHub.$on('$InfiniteLoading:loaded', () => {
522506
this.isFirstLoad = false;
523507

524508
if (this.direction === 'top') {
@@ -531,24 +515,16 @@ var script = /* #__PURE__ */defineComponent({
531515
if (this.status === STATUS.LOADING) {
532516
this.$nextTick(this.attemptLoad.bind(null, true));
533517
}
534-
535-
if (!ev || ev.target !== this) {
536-
warn(WARNINGS.STATE_CHANGER);
537-
}
538518
});
539-
eventHub.$on('$InfiniteLoading:complete', ev => {
519+
eventHub.$on('$InfiniteLoading:complete', () => {
540520
this.status = STATUS.COMPLETE; // force re-complation computed properties to fix the problem of get slot text delay
541521

542522
this.$nextTick(() => {
543523
this.$forceUpdate();
544524
});
545525
this.scrollParent.removeEventListener('scroll', this.scrollHandler, evt3rdArg);
546-
547-
if (!ev || ev.target !== this) {
548-
warn(WARNINGS.STATE_CHANGER);
549-
}
550526
});
551-
eventHub.$on('$InfiniteLoading:reset', ev => {
527+
eventHub.$on('$InfiniteLoading:reset', () => {
552528
this.status = STATUS.READY;
553529
this.isFirstLoad = true;
554530
scrollBarStorage.remove(this.scrollParent);
@@ -558,10 +534,6 @@ var script = /* #__PURE__ */defineComponent({
558534
throttleer.reset();
559535
this.scrollHandler();
560536
}, 1);
561-
562-
if (!ev || ev.target !== this) {
563-
warn(WARNINGS.IDENTIFIER);
564-
}
565537
});
566538
/**
567539
* change state for this component, pass to the callback
@@ -709,9 +681,9 @@ var script = /* #__PURE__ */defineComponent({
709681

710682
});
711683

712-
const _withId = /*#__PURE__*/withScopeId("data-v-c0896196");
684+
const _withId = /*#__PURE__*/withScopeId("data-v-ce57e962");
713685

714-
pushScopeId("data-v-c0896196");
686+
pushScopeId("data-v-ce57e962");
715687

716688
const _hoisted_1 = {
717689
class: "infinite-loading-container"
@@ -762,11 +734,11 @@ const render = /*#__PURE__*/_withId((_ctx, _cache, $props, $setup, $data, $optio
762734
}, null, 8, ["textContent"])], 64))])], 4), [[vShow, _ctx.isShowError]])]);
763735
});
764736

765-
var css_248z = ".infinite-loading-container[data-v-c0896196] {\n clear: both;\n text-align: center;\n}\n.infinite-loading-container[data-v-c0896196] *[class^=loading-] {\n display: inline-block;\n margin: 5px 0;\n width: 28px;\n height: 28px;\n font-size: 28px;\n line-height: 28px;\n border-radius: 50%;\n}\n.btn-try-infinite[data-v-c0896196] {\n margin-top: 5px;\n padding: 5px 10px;\n color: #999;\n font-size: 14px;\n line-height: 1;\n background: transparent;\n border: 1px solid #ccc;\n border-radius: 3px;\n outline: none;\n cursor: pointer;\n}\n.btn-try-infinite[data-v-c0896196]:not(:active):hover {\n opacity: 0.8;\n}\n";
737+
var css_248z = ".infinite-loading-container[data-v-ce57e962] {\n clear: both;\n text-align: center;\n}\n.infinite-loading-container[data-v-ce57e962] *[class^=loading-] {\n display: inline-block;\n margin: 5px 0;\n width: 28px;\n height: 28px;\n font-size: 28px;\n line-height: 28px;\n border-radius: 50%;\n}\n.btn-try-infinite[data-v-ce57e962] {\n margin-top: 5px;\n padding: 5px 10px;\n color: #999;\n font-size: 14px;\n line-height: 1;\n background: transparent;\n border: 1px solid #ccc;\n border-radius: 3px;\n outline: none;\n cursor: pointer;\n}\n.btn-try-infinite[data-v-ce57e962]:not(:active):hover {\n opacity: 0.8;\n}\n";
766738
styleInject(css_248z);
767739

768740
script.render = render;
769-
script.__scopeId = "data-v-c0896196";
741+
script.__scopeId = "data-v-ce57e962";
770742

771743
// Import vue component
772744
// IIFE injects install function into component, allowing component

0 commit comments

Comments
 (0)