+44
-55
lines changedFilter options
+44
-55
lines changed Original file line number Diff line number Diff line change
@@ -1,85 +1,74 @@
1 -
<script lang="jsx">
1 +
<script>
2 2
import { addClass, removeClass } from '../../utils/dom.utils';
3 +
import { onMounted, ref, watchEffect, defineComponent, h } from 'vue';
3 4 4 -
const COLLAPSE = 'collapse';
5 -
const IN = 'in';
6 -
const COLLAPSING = 'collapsing';
7 - 8 -
export default {
5 +
export default defineComponent({
9 6
props: {
10 -
tag: {
11 -
type: String,
12 -
default: 'div',
13 -
},
14 -
modelValue: {
15 -
type: Boolean,
16 -
default: false,
17 -
},
18 -
transition: {
19 -
type: Number,
20 -
default: 350,
21 -
},
7 +
tag: { type: String, default: 'div' },
8 +
modelValue: { type: Boolean, default: false },
9 +
transition: { type: Number, default: 350 },
22 10
},
23 11
emits: ['show', 'shown', 'hide', 'hidden'],
24 -
data() {
25 -
return {
26 -
timeoutId: 0,
27 -
};
28 -
},
29 -
watch: {
30 -
modelValue(show) {
31 -
this.toggle(show);
32 -
},
33 -
},
34 -
mounted() {
35 -
const el = this.$el;
36 -
addClass(el, COLLAPSE);
37 -
if (this.modelValue) {
38 -
addClass(el, IN);
39 -
}
40 -
},
41 -
methods: {
42 -
toggle(show) {
43 -
clearTimeout(this.timeoutId);
44 -
const el = this.$el;
12 +
setup(props, { emit, slots }) {
13 +
const COLLAPSE = 'collapse';
14 +
const IN = 'in';
15 +
const COLLAPSING = 'collapsing';
16 +
let timeoutId = 0;
17 +
const element = ref(null);
18 + 19 +
function toggle(show) {
20 +
clearTimeout(timeoutId);
21 +
const el = element.value;
22 +
if (!el) {
23 +
return;
24 +
}
45 25
if (show) {
46 -
this.$emit('show');
26 +
emit('show');
47 27
removeClass(el, COLLAPSE);
48 28
el.style.height = 'auto';
49 29
const height = window.getComputedStyle(el).height;
50 30
el.style.height = null;
51 31
addClass(el, COLLAPSING);
52 32
el.offsetHeight; // force repaint
53 33
el.style.height = height;
54 -
this.timeoutId = setTimeout(() => {
34 +
timeoutId = setTimeout(() => {
55 35
removeClass(el, COLLAPSING);
56 36
addClass(el, COLLAPSE);
57 37
addClass(el, IN);
58 38
el.style.height = null;
59 -
this.timeoutId = 0;
60 -
this.$emit('shown');
61 -
}, this.transition);
39 +
timeoutId = 0;
40 +
emit('shown');
41 +
}, props.transition);
62 42
} else {
63 -
this.$emit('hide');
43 +
emit('hide');
64 44
el.style.height = window.getComputedStyle(el).height;
65 45
removeClass(el, IN);
66 46
removeClass(el, COLLAPSE);
67 47
el.offsetHeight;
68 48
el.style.height = null;
69 49
addClass(el, COLLAPSING);
70 -
this.timeoutId = setTimeout(() => {
50 +
timeoutId = setTimeout(() => {
71 51
addClass(el, COLLAPSE);
72 52
removeClass(el, COLLAPSING);
73 53
el.style.height = null;
74 -
this.timeoutId = 0;
75 -
this.$emit('hidden');
76 -
}, this.transition);
54 +
timeoutId = 0;
55 +
emit('hidden');
56 +
}, props.transition);
77 57
}
78 -
},
79 -
},
80 -
render() {
81 -
const Tag = this.tag;
82 -
return <Tag>{this.$slots.default?.()}</Tag>;
58 +
}
59 + 60 +
watchEffect(() => {
61 +
toggle(props.modelValue);
62 +
});
63 + 64 +
onMounted(() => {
65 +
addClass(element.value, COLLAPSE);
66 +
if (props.modelValue) {
67 +
addClass(element.value, IN);
68 +
}
69 +
});
70 + 71 +
return () => h(props.tag, { ref: element }, slots.default?.());
83 72
},
84 -
};
73 +
});
85 74
</script>
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