[ui] Vue 3 - Migrated LogsPanel component
</template>
<script lang="ts">
- import Vue from 'vue';
- import Component from 'vue-class-component';
- import { Prop, Watch } from 'vue-property-decorator';
+ import { defineComponent } from 'vue';
import I18n from 'utils/i18n';
- @Component({
- methods: { I18n }
- })
- export default class LogsPanel extends Vue {
- @Prop()
- logs = '';
- @Prop({ required: false })
- autoScroll = true;
+ export default defineComponent({
+ props: {
+ logs: {
+ type: String,
+ default: undefined
+ },
+ autoScroll: {
+ type: Boolean,
+ default: true
+ }
+ },
- ignoreNextScrollEvent = false;
- userScrolled = false;
+ data(): {
+ ignoreNextScrollEvent: boolean;
+ userScrolled: boolean;
+ } {
+ return {
+ ignoreNextScrollEvent: false,
+ userScrolled: false
+ };
+ },
- onScroll(): void {
+ watch: {
+ logs(): void {
if (!this.autoScroll) {
return;
}
const containerEl = <HTMLDivElement>this.$refs.logsContainer;
- if (!this.ignoreNextScrollEvent && containerEl) {
- this.userScrolled =
+ if (
+ !this.userScrolled &&
containerEl &&
- containerEl.scrollHeight - containerEl.clientHeight - containerEl.scrollTop > 10;
+ containerEl.scrollHeight > containerEl.clientHeight
+ ) {
+ this.ignoreNextScrollEvent = true;
+ containerEl.scrollTop = containerEl.scrollHeight - containerEl.clientHeight;
}
- this.ignoreNextScrollEvent = false;
}
+ },
- @Watch('logs', { immediate: true })
- scrollToLatest(): void {
+ methods: {
+ I18n,
+ onScroll(): void {
if (!this.autoScroll) {
return;
}
const containerEl = <HTMLDivElement>this.$refs.logsContainer;
- if (
- !this.userScrolled &&
+ if (!this.ignoreNextScrollEvent && containerEl) {
+ this.userScrolled =
containerEl &&
- containerEl.scrollHeight > containerEl.clientHeight
- ) {
- this.ignoreNextScrollEvent = true;
- containerEl.scrollTop = containerEl.scrollHeight - containerEl.clientHeight;
+ containerEl.scrollHeight - containerEl.clientHeight - containerEl.scrollTop > 10;
}
+ this.ignoreNextScrollEvent = false;
}
}
+ });
</script>
<style lang="scss" scoped>
