+81
-96
lines changedFilter options
+81
-96
lines changed Original file line number Diff line number Diff line change
@@ -1,77 +1,62 @@
1 1
<template>
2 -
<div class="hidden-print">
2 +
<div ref="el" class="hidden-print">
3 3
<div v-scroll="onScroll" :class="classes" :style="styles">
4 4
<slot></slot>
5 5
</div>
6 6
</div>
7 7
</template>
8 8 9 -
<script>
10 -
import scroll from './../../directives/scroll';
9 +
<script setup>
10 +
import vScroll from './../../directives/scroll';
11 +
import { computed, defineProps, ref, nextTick } from 'vue';
11 12 12 -
export default {
13 -
directives: {
14 -
scroll,
13 +
const props = defineProps({
14 +
offset: {
15 +
type: Number,
16 +
default: 0,
15 17
},
16 -
props: {
17 -
offset: {
18 -
type: Number,
19 -
default: 0,
20 -
},
21 -
},
22 -
data() {
23 -
return {
24 -
affixed: false,
25 -
};
26 -
},
27 -
computed: {
28 -
classes() {
29 -
return {
30 -
affix: this.affixed,
31 -
};
32 -
},
33 -
styles() {
34 -
return {
35 -
top: this.affixed ? this.offset + 'px' : null,
36 -
};
37 -
},
38 -
},
39 -
methods: {
40 -
// from https://github.com/ant-design/ant-design/blob/master/components/affix/index.jsx#L20
41 -
onScroll() {
42 -
// if is hidden don't calculate anything
43 -
if (
44 -
!(
45 -
this.$el.offsetWidth ||
46 -
this.$el.offsetHeight ||
47 -
this.$el.getClientRects().length
48 -
)
49 -
) {
50 -
return;
51 -
}
52 -
// get window scroll and element position to detect if have to be normal or affixed
53 -
const scroll = {};
54 -
const element = {};
55 -
const rect = this.$el.getBoundingClientRect();
56 -
const body = document.body;
57 -
const types = ['Top', 'Left'];
58 -
types.forEach((type) => {
59 -
const t = type.toLowerCase();
60 -
scroll[t] = window['page' + (type === 'Top' ? 'Y' : 'X') + 'Offset'];
61 -
element[t] =
62 -
scroll[t] +
63 -
rect[t] -
64 -
(this.$el['client' + type] || body['client' + type] || 0);
65 -
});
66 -
const fix = scroll.top > element.top - this.offset;
67 -
if (this.affixed !== fix) {
68 -
this.affixed = fix;
69 -
this.$emit(this.affixed ? 'affix' : 'unfix');
70 -
this.$nextTick(() => {
71 -
this.$emit(this.affixed ? 'affixed' : 'unfixed');
72 -
});
73 -
}
74 -
},
75 -
},
76 -
};
18 +
});
19 + 20 +
const emit = defineEmits(['affix', 'affixed', 'unfix', 'unfixed']);
21 + 22 +
const el = ref(null);
23 +
const affixed = ref(false);
24 +
const classes = computed(() => ({ affix: affixed.value }));
25 +
const styles = computed(() => ({
26 +
top: affixed.value ? props.offset + 'px' : null,
27 +
}));
28 + 29 +
function onScroll() {
30 +
if (
31 +
!(
32 +
el.value?.offsetWidth ||
33 +
el.value?.offsetHeight ||
34 +
el.value?.getClientRects().length
35 +
)
36 +
) {
37 +
return;
38 +
}
39 +
// get window scroll and element position to detect if have to be normal or affixed
40 +
const scroll = {};
41 +
const element = {};
42 +
const rect = el.value.getBoundingClientRect();
43 +
const body = document.body;
44 +
const types = ['Top', 'Left'];
45 +
types.forEach((type) => {
46 +
const t = type.toLowerCase();
47 +
scroll[t] = window['page' + (type === 'Top' ? 'Y' : 'X') + 'Offset'];
48 +
element[t] =
49 +
scroll[t] +
50 +
rect[t] -
51 +
(el.value['client' + type] || body['client' + type] || 0);
52 +
});
53 +
const fix = scroll.top > element.top - props.offset;
54 +
if (affixed.value !== fix) {
55 +
affixed.value = fix;
56 +
emit(affixed.value ? 'affix' : 'unfix');
57 +
nextTick(() => {
58 +
emit(affixed.value ? 'affixed' : 'unfixed');
59 +
});
60 +
}
61 +
}
77 62
</script>
Original file line number Diff line number Diff line change
@@ -4,9 +4,9 @@ import { hasOwnProperty } from '../../utils/object.utils';
4 4 5 5
const INSTANCE = '_uiv_popover_instance';
6 6 7 -
const bind = (el, binding) => {
7 +
const mounted = (el, binding) => {
8 8
// console.log('bind')
9 -
unbind(el);
9 +
unmounted(el);
10 10
const options = [];
11 11
for (const key in binding.modifiers) {
12 12
if (hasOwnProperty(binding.modifiers, key) && binding.modifiers[key]) {
@@ -54,7 +54,7 @@ const bind = (el, binding) => {
54 54
el[INSTANCE] = container;
55 55
};
56 56 57 -
const unbind = (el) => {
57 +
const unmounted = (el) => {
58 58
// console.log('unbind')
59 59
const instance = el[INSTANCE];
60 60
if (instance) {
@@ -63,11 +63,11 @@ const unbind = (el) => {
63 63
delete el[INSTANCE];
64 64
};
65 65 66 -
const update = (el, binding) => {
66 +
const updated = (el, binding) => {
67 67
// console.log('update')
68 68
if (binding.value !== binding.oldValue) {
69 -
bind(el, binding);
69 +
mounted(el, binding);
70 70
}
71 71
};
72 72 73 -
export default { mounted: bind, unmounted: unbind, updated: update };
73 +
export default { mounted, unmounted, updated };
Original file line number Diff line number Diff line change
@@ -4,29 +4,29 @@ import { isFunction } from '../utils/object.utils';
4 4
const HANDLER = '_uiv_scroll_handler';
5 5
const events = [EVENTS.RESIZE, EVENTS.SCROLL];
6 6 7 -
const bind = (el, binding) => {
7 +
const mounted = (el, binding) => {
8 8
const callback = binding.value;
9 9
if (!isFunction(callback)) {
10 10
return;
11 11
}
12 -
unbind(el);
12 +
unmounted(el);
13 13
el[HANDLER] = callback;
14 14
events.forEach((event) => {
15 15
on(window, event, el[HANDLER]);
16 16
});
17 17
};
18 18 19 -
const unbind = (el) => {
19 +
const unmounted = (el) => {
20 20
events.forEach((event) => {
21 21
off(window, event, el[HANDLER]);
22 22
});
23 23
delete el[HANDLER];
24 24
};
25 25 26 -
const update = (el, binding) => {
26 +
const updated = (el, binding) => {
27 27
if (binding.value !== binding.oldValue) {
28 -
bind(el, binding);
28 +
mounted(el, binding);
29 29
}
30 30
};
31 31 32 -
export default { mounted: bind, unmounted: unbind, updated: update };
32 +
export default { mounted, unmounted, updated };
Original file line number Diff line number Diff line change
@@ -141,12 +141,12 @@ ScrollSpy.prototype.clear = function () {
141 141
const INSTANCE = '_uiv_scrollspy_instance';
142 142
const events = [EVENTS.RESIZE, EVENTS.SCROLL];
143 143 144 -
const bind = (el, binding) => {
144 +
const beforeMount = (el, binding) => {
145 145
// console.log('bind')
146 -
unbind(el);
146 +
unmounted(el);
147 147
};
148 148 149 -
const inserted = (el, binding) => {
149 +
const mounted = (el, binding) => {
150 150
// console.log('inserted')
151 151
const scrollSpy = new ScrollSpy(el, binding.arg, binding.value);
152 152
if (scrollSpy.scrollElement) {
@@ -160,7 +160,7 @@ const inserted = (el, binding) => {
160 160
el[INSTANCE] = scrollSpy;
161 161
};
162 162 163 -
const unbind = (el) => {
163 +
const unmounted = (el) => {
164 164
// console.log('unbind')
165 165
const instance = el[INSTANCE];
166 166
if (instance && instance.scrollElement) {
@@ -171,19 +171,19 @@ const unbind = (el) => {
171 171
}
172 172
};
173 173 174 -
const update = (el, binding) => {
174 +
const updated = (el, binding) => {
175 175
// console.log('update')
176 176
const isArgUpdated = binding.arg !== binding.oldArg;
177 177
const isValueUpdated = binding.value !== binding.oldValue;
178 178
if (isArgUpdated || isValueUpdated) {
179 -
bind(el, binding);
180 -
inserted(el, binding);
179 +
beforeMount(el, binding);
180 +
mounted(el, binding);
181 181
}
182 182
};
183 183 184 184
export default {
185 -
beforeMount: bind,
186 -
unmounted: unbind,
187 -
updated: update,
188 -
mounted: inserted,
185 +
beforeMount,
186 +
mounted,
187 +
updated,
188 +
unmounted,
189 189
};
Original file line number Diff line number Diff line change
@@ -5,9 +5,9 @@ import { removeFromDom } from '../../utils/dom.utils';
5 5 6 6
const INSTANCE = '_uiv_tooltip_instance';
7 7 8 -
const bind = (el, binding) => {
8 +
const mounted = (el, binding) => {
9 9
// console.log('bind')
10 -
unbind(el);
10 +
unmounted(el);
11 11
const options = [];
12 12
for (const key in binding.modifiers) {
13 13
if (hasOwnProperty(binding.modifiers, key) && binding.modifiers[key]) {
@@ -55,7 +55,7 @@ const bind = (el, binding) => {
55 55
el[INSTANCE] = { container, vNode };
56 56
};
57 57 58 -
const unbind = (el) => {
58 +
const unmounted = (el) => {
59 59
// console.log('unbind', el[INSTANCE])
60 60
const instance = el[INSTANCE];
61 61
if (instance) {
@@ -67,11 +67,11 @@ const unbind = (el) => {
67 67
delete el[INSTANCE];
68 68
};
69 69 70 -
const update = (el, binding) => {
70 +
const updated = (el, binding) => {
71 71
// console.log('update', binding.oldValue, '->', binding.value)
72 72
if (binding.value !== binding.oldValue) {
73 -
bind(el, binding);
73 +
mounted(el, binding);
74 74
}
75 75
};
76 76 77 -
export default { mounted: bind, unmounted: unbind, updated: update };
77 +
export default { mounted, unmounted, updated };
You can’t perform that action at this time.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4