8000 feat: remove default styles if slot is not a pure text node (#80) · PeachScript/vue-infinite-loading@c9383bc · GitHub
[go: up one dir, main page]
Skip to content

Commit c9383bc

Browse files
PeachScriptPeachScript
committed
feat: remove default styles if slot is not a pure text node (#80)
1 parent de28487 commit c9383bc

File tree

3 files changed

+89
-60
lines changed

3 files changed

+89
-60
lines changed

‎src/components/InfiniteLoading.vue

Lines changed: 74 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,35 @@
11
<template>
22
<div class="infinite-loading-container">
3-
<div v-show="isShowSpinner">
3+
<div
4+
class="infinite-status-prompt"
5+
v-show="isShowSpinner"
6+
:style="slotStyles.spinner">
47
<slot name="spinner">
58
<spinner :spinner="spinner" />
69
</slot>
710
</div>
8-
<div class="infinite-status-prompt" v-show="isShowNoResults">
11+
<div
12+
class="infinite-status-prompt"
13+
:style="slotStyles.noResults"
14+
v-show="isShowNoResults">
915
<slot name="no-results">
1016
<component v-if="slots.noResults.render" :is="slots.noResults"></component>
1117
<template v-else>{{ slots.noResults }}</template>
1218
</slot>
1319
</div>
14-
<div class="infinite-status-prompt" v-show="isShowNoMore">
20+
<div
21+
class="infinite-status-prompt"
22+
:style="slotStyles.noMore"
23+
v-show="isShowNoMore">
1524
<slot name="no-more">
1625
<component v-if="slots.noMore.render" :is="slots.noMore"></component>
1726
<template v-else>{{ slots.noMore }}</template>
1827
</slot>
1928
</div>
20-
<div class="infinite-status-prompt" v-show="isShowError">
29+
<div
30+
class="infinite-status-prompt"
31+
:style="slotStyles.error"
32+
v-show="isShowError">
2133
<slot name="error" :trigger="attemptLoad">
2234
<component
2335
v-if="slots.error.render"
@@ -39,9 +51,11 @@
3951
</template>
4052
<script>
4153
import Spinner from './Spinner.vue';
42-
import config, { evt3rdArg, WARNINGS, STATUS } from '../config';
54+
import config, {
55+
evt3rdArg, WARNINGS, STATUS, SLOT_STYLES,
56+
} from '../config';
4357
import {
44-
warn, throttleer, loopTracker, isBlankSlotElm, scrollBarStorage,
58+
warn, throttleer, loopTracker, scrollBarStorage, kebabCase,
4559
} from '../utils';
4660
4761
export default {
@@ -65,25 +79,42 @@ export default {
6579
isShowError() {
6680
return this.status === STATUS.ERROR;
6781
},
68-
isShowNoResults: {
69-
cache: false, // disable cache to fix the problem of get slot text delay
70-
get() {
71-
return (
72-
this.status === STATUS.COMPLETE
73-
&& this.isFirstLoad
74-
&& !isBlankSlotElm(this.$slots['no-results'])
75-
);
76-
},
82+
isShowNoResults() {
83+
return (
84+
this.status === STATUS.COMPLETE
85+
&& this.isFirstLoad
86+
);
7787
},
78-
isShowNoMore: {
79-
cache: false, // disable cache to fix the problem of get slot text delay
80-
get() {
81-
return (
82-
this.status === STATUS.COMPLETE
83-
&& !this.isFirstLoad
84-
&& !isBlankSlotElm(this.$slots['no-more'])
85-
);
86-
},
88+
isShowNoMore() {
89+
return (
90+
this.status === STATUS.COMPLETE
91+
&& !this.isFirstLoad
92+
);
93+
},
94+
slotStyles() {
95+
const styles = {};
96+
97+
Object.keys(config.slots).forEach((key) => {
98+
const name = kebabCase(key);
99+
100+
if (
101+
// no slot and the configured default slot is not a Vue component
102+
(
103+
!this.$slots[name]
104+
&& !config.slots[key].render
105+
)
106+
// has slot and slot is pure text node
107+
|| (
108+
this.$slots[name]
109+
&& !this.$slots[name][0].tag
110+
)
111+
) {
112+
// only apply default styles for pure text slot
113+
styles[key] = SLOT_STYLES;
114+
}
115+
});
116+
117+
return styles;
87118
},
88119
},
89120
props: {
@@ -177,10 +208,6 @@ export default {
177208
}
178209
});
179210
180-
if (this.onInfinite) {
181-
warn(WARNINGS.INFINITE_EVENT);
182-
}
183-
184211
/**
185212
* change state for this component, pass to the callback
186213
*/
@@ -199,6 +226,10 @@ export default {
199226
throttleer.reset();
200227
},
201228
};
229+
230+
if (this.onInfinite) {
231+
warn(WARNINGS.INFINITE_EVENT);
232+
}
202233
},
203234
/**
204235
* To adapt to keep-alive feature, but only work on Vue 2.2.0 and above, see: https://vuejs.org/v2/api/#keep-alive
@@ -315,10 +346,11 @@ export default {
315346
.infinite-loading-container {
316347
clear: both;
317348
text-align: center;
349+
318350
@{deep} *[class^=loading-] {
319351
@size: 28px;
320352
display: inline-block;
321-
margin: 15px 0;
353+
margin: 5px 0;
322354
width: @size;
323355
height: @size;
324356
font-size: @size;
@@ -327,27 +359,20 @@ export default {
327359
}
328360
}
329361
330-
.infinite-status-prompt {
331-
color: #666;
362+
.btn-try-infinite {
363+
margin-top: 5px;
364+
padding: 5px 10px;
365+
color: #999;
332366
font-size: 14px;
333-
text-align: center;
334-
padding: 10px 0;
335-
336-
.btn-try-infinite {
337-
margin-top: 5px;
338-
padding: 5px 10px;
339-
color: #999;
340-
font-size: 14px;
341-
line-height: 1;
342-
background: transparent;
343-
border: 1px solid #ccc;
344-
border-radius: 3px;
345-
outline: none;
346-
cursor: pointer;
347-
348-
&:not(:active):hover {
349-
opacity: 0.8;
350-
}
367+
line-height: 1;
368+
background: transparent;
369+
border: 1px solid #ccc;
370+
border-radius: 3px;
371+
outline: none;
372+
cursor: pointer;
373+
374+
&:not(:active):hover {
375+
opacity: 0.8;
351376
}
352377
}
353378
</style>

‎src/config.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -127,6 +127,15 @@ export const STATUS = {
127127
ERROR: 3,
128128
};
129129

130+
/**
131+
* default slot styles
132+
*/
133+
export const SLOT_STYLES = {
134+
color: '#666',
135+
fontSize: '14px',
136+
padding: '10px 0',
137+
};
138+
130139
export default {
131140
mode: 'development',
132141
props,

‎src/utils.js

Lines changed: 6 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -89,24 +89,19 @@ export const scrollBarStorage = {
8989
};
9090

9191
/**
92-
* determine slot is or not a empty element
93-
* @param {Slot} slot target slot
94-
* @return {Boolean}
92+
* kebab-case a camel-case string
93+
* @param {String} str source string
94+
* @return {String}
9595
*/
96-
export function isBlankSlotElm(slot) {
97-
return (
98-
slot
99-
&& slot[0].elm
100-
&& slot[0].elm.textContent === ''
101-
&& slot[0].elm.childNodes.length === 0
102-
);
96+
export function kebabCase(str) {
97+
return str.replace(/[A-Z]/g, s => `-${s.toLowerCase()}`);
10398
}
10499

105100
export default {
106101
warn,
107102
error,
108103
throttleer,
109104
loopTracker,
110-
isBlankSlotElm,
105+
kebabCase,
111106
scrollBarStorage,
112107
};

0 commit comments

Comments
 (0)
0