@mptw/skylens-ui 1.3.16 → 1.4.1
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/components/SLNotification.vue +151 -0
- package/components/SLTable.vue +4 -3
- package/package.json +1 -1
|
@@ -0,0 +1,151 @@
|
|
|
1
|
+
<template lang="pug">
|
|
2
|
+
Transition(
|
|
3
|
+
@before-enter='onBeforeEnter',
|
|
4
|
+
@enter='onEnter',
|
|
5
|
+
@after-enter='onAfterEnter',
|
|
6
|
+
@enter-cancelled='onAfterEnter',
|
|
7
|
+
@before-leave='onBeforeLeave',
|
|
8
|
+
@leave='onLeave',
|
|
9
|
+
@after-leave='onAfterLeave',
|
|
10
|
+
@leave-cancelled='onAfterLeave',
|
|
11
|
+
)
|
|
12
|
+
.notification(v-if='isShow')
|
|
13
|
+
.notification-wrapper {{ content }}
|
|
14
|
+
</template>
|
|
15
|
+
|
|
16
|
+
<script lang="ts">
|
|
17
|
+
import gsap from 'gsap';
|
|
18
|
+
|
|
19
|
+
export default defineComponent({
|
|
20
|
+
name: 'SLNotification',
|
|
21
|
+
props: {
|
|
22
|
+
isShow: {
|
|
23
|
+
type: Boolean,
|
|
24
|
+
default: false,
|
|
25
|
+
},
|
|
26
|
+
content: {
|
|
27
|
+
type: String,
|
|
28
|
+
default: '',
|
|
29
|
+
},
|
|
30
|
+
},
|
|
31
|
+
emits: ['update:isShow'],
|
|
32
|
+
setup(props, { emit }) {
|
|
33
|
+
const { isShow } = toRefs(props);
|
|
34
|
+
|
|
35
|
+
let timeoutId: any = null;
|
|
36
|
+
|
|
37
|
+
function onBeforeEnter(el: Element) {
|
|
38
|
+
const wrapperEl = el.querySelector('.notification-wrapper');
|
|
39
|
+
|
|
40
|
+
if (wrapperEl) {
|
|
41
|
+
gsap.set(wrapperEl, {
|
|
42
|
+
alpha: 0
|
|
43
|
+
});
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
function onEnter(el: Element, done: () => void) {
|
|
48
|
+
const wrapperEl = el.querySelector('.notification-wrapper');
|
|
49
|
+
|
|
50
|
+
if (wrapperEl) {
|
|
51
|
+
gsap.to(wrapperEl, {
|
|
52
|
+
alpha: 1,
|
|
53
|
+
duration: 0.3,
|
|
54
|
+
onComplete: () => {
|
|
55
|
+
done();
|
|
56
|
+
}
|
|
57
|
+
})
|
|
58
|
+
} else {
|
|
59
|
+
done();
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
function onAfterEnter(el: Element) {
|
|
64
|
+
const wrapperEl = el.querySelector('.notification-wrapper');
|
|
65
|
+
|
|
66
|
+
if (wrapperEl) {
|
|
67
|
+
gsap.set(wrapperEl, {
|
|
68
|
+
alpha: 1
|
|
69
|
+
});
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
function onBeforeLeave(el: Element) {
|
|
74
|
+
const wrapperEl = el.querySelector('.notification-wrapper');
|
|
75
|
+
|
|
76
|
+
if (wrapperEl) {
|
|
77
|
+
gsap.set(wrapperEl, {
|
|
78
|
+
alpha: 1
|
|
79
|
+
});
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
function onLeave(el: Element, done: () => void) {
|
|
84
|
+
const wrapperEl = el.querySelector('.notification-wrapper');
|
|
85
|
+
|
|
86
|
+
if (wrapperEl) {
|
|
87
|
+
gsap.to(wrapperEl, {
|
|
88
|
+
alpha: 0,
|
|
89
|
+
duration: 0.3,
|
|
90
|
+
onComplete: () => {
|
|
91
|
+
done();
|
|
92
|
+
}
|
|
93
|
+
})
|
|
94
|
+
} else {
|
|
95
|
+
done();
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
function onAfterLeave(el: Element) {
|
|
100
|
+
const wrapperEl = el.querySelector('.notification-wrapper');
|
|
101
|
+
|
|
102
|
+
if (wrapperEl) {
|
|
103
|
+
gsap.set(wrapperEl, {
|
|
104
|
+
alpha: 0
|
|
105
|
+
});
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
function delayHide() {
|
|
110
|
+
if (timeoutId) {
|
|
111
|
+
clearTimeout(timeoutId);
|
|
112
|
+
}
|
|
113
|
+
timeoutId = null;
|
|
114
|
+
|
|
115
|
+
timeoutId = setTimeout(() => {
|
|
116
|
+
emit('update:isShow', false);
|
|
117
|
+
}, 2000);
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
watch(isShow, () => {
|
|
121
|
+
if (isShow.value) {
|
|
122
|
+
delayHide();
|
|
123
|
+
}
|
|
124
|
+
});
|
|
125
|
+
|
|
126
|
+
onBeforeUnmount(() => {
|
|
127
|
+
if (timeoutId) {
|
|
128
|
+
clearTimeout(timeoutId);
|
|
129
|
+
}
|
|
130
|
+
timeoutId = null;
|
|
131
|
+
})
|
|
132
|
+
|
|
133
|
+
return {
|
|
134
|
+
onBeforeEnter,
|
|
135
|
+
onEnter,
|
|
136
|
+
onAfterEnter,
|
|
137
|
+
onBeforeLeave,
|
|
138
|
+
onLeave,
|
|
139
|
+
onAfterLeave,
|
|
140
|
+
};
|
|
141
|
+
},
|
|
142
|
+
});
|
|
143
|
+
</script>
|
|
144
|
+
|
|
145
|
+
<style lang="stylus">
|
|
146
|
+
.notification
|
|
147
|
+
@apply s('z-[100]') fixed top-0 left-0 w-full h-full pointer-events-none
|
|
148
|
+
|
|
149
|
+
&-wrapper
|
|
150
|
+
@apply absolute s('top-1/2') s('left-1/2') p-4 s('bg-backdrop/80') rounded text-base text-white s('-translate-x-1/2') s('-translate-y-1/2') shadow-popup-sm
|
|
151
|
+
</style>
|
package/components/SLTable.vue
CHANGED
|
@@ -89,9 +89,10 @@
|
|
|
89
89
|
td(:colspan="fields.length")
|
|
90
90
|
div(v-if="loading", style="min-height: 200px")
|
|
91
91
|
.flex.flex-col.items-center.py-8.px-4.space-y-3(v-else)
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
92
|
+
slot(name='noItems')
|
|
93
|
+
img(src="~/assets/images/commons/empty-box.png")
|
|
94
|
+
.text-lg.text-primary-light {{ noItems }}
|
|
95
|
+
.text-sm.text-gray-3(v-if="reason") 可能的原因：{{ reason }}
|
|
95
96
|
SLLoading(
|
|
96
97
|
v-if="loading"
|
|
97
98
|
:boundaries="[{ sides: ['top'], query: 'td' }, { sides: ['bottom'], query: 'tbody' }]"
|