[ui] Vue 3 - Migrated SqlText component
<script lang="ts">
import $ from 'jquery';
- import Vue from 'vue';
- import Component from 'vue-class-component';
- import { Prop, Watch } from 'vue-property-decorator';
+ import { defineComponent } from 'vue';
import { formatSql } from 'apps/editor/api';
import { getAceMode } from 'ext/aceHelper';
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const getAce = (): Ace => (window as any).ace;
- @Component
- export default class SqlText extends Vue {
- @Prop({ required: false })
- dialect = 'hive';
- @Prop({ required: false })
- value = '';
- @Prop({ required: false })
- format = false;
- @Prop({ required: false })
- enableOverflow = false;
- @Prop({ required: false })
- splitLines = false;
-
- @Watch('value')
+ export default defineComponent({
+ props: {
+ dialect: {
+ type: String,
+ default: 'hive'
+ },
+ value: {
+ type: String,
+ default: ''
+ },
+ format: {
+ type: Boolean,
+ default: false
+ },
+ enableOverflow: {
+ type: Boolean,
+ default: false
+ },
+ splitLines: {
+ type: Boolean,
+ default: false
+ }
+ },
+
+ watch: {
+ async value(): Promise<void> {
+ this.renderAce();
+ }
+ },
+
+ mounted(): void {
+ this.renderAce();
+ },
+
+ methods: {
async renderAce(): Promise<void> {
if (!this.value) {
return;
const tokens = tok.getLineTokens(line);
if (tokens && tokens.tokens.length) {
- renderSimpleLine(new Text(document.createElement('div')), renderedTokens, tokens.tokens);
+ renderSimpleLine(
+ new Text(document.createElement('div')),
+ renderedTokens,
+ tokens.tokens
+ );
}
res.push(
}
$(this.$el).find('.ace_invisible_space').remove();
}
-
- mounted(): void {
- this.renderAce();
- }
}
+ });
</script>
<style lang="scss" scoped></style>
