[ui] Vue 3 - Migrated MatchedText components

cloudera · Feb 17, 2021 · faa7724 · faa7724
1 parent 36dd6d0
commit faa7724
Showing 1 changed file with 42 additions and 33 deletions.
diff --git a/desktop/core/src/desktop/js/apps/editor/components/aceEditor/autocomplete/MatchedText.vue b/desktop/core/src/desktop/js/apps/editor/components/aceEditor/autocomplete/MatchedText.vue
@@ -23,42 +23,51 @@
 <!-- eslint-enable -->
 
 <script lang="ts">
+  import { defineComponent, PropType } from 'vue';
+
   import { Suggestion } from './AutocompleteResults';
-  import Vue from 'vue';
-  import Component from 'vue-class-component';
-  import { Prop } from 'vue-property-decorator';
 
-  @Component
-  export default class Spinner extends Vue {
-    @Prop({ required: true })
-    suggestion!: Suggestion;
-    @Prop({ required: true })
-    filter!: string;
-    @Prop({ required: false, default: false })
-    isComment?: boolean;
+  export default defineComponent({
+    props: {
+      suggestion: {
+        type: Object as PropType<Suggestion>,
+        required: true
+      },
+      filter: {
+        type: String,
+        required: true
+      },
+      isComment: {
+        type: Boolean,
+        required: false,
+        default: false
+      }
+    },
 
-    get content(): string {
-      const value =
-        (this.isComment
-          ? (<{ comment?: string }>this.suggestion.details).comment
-          : this.suggestion.value) || '';
-      if (
-        this.filter &&
-        typeof this.suggestion.matchIndex !== 'undefined' &&
-        this.suggestion.matchIndex > -1 &&
-        typeof this.suggestion.matchLength !== 'undefined' &&
-        ((!this.isComment && !this.suggestion.matchComment) ||
-          (this.isComment && this.suggestion.matchComment))
-      ) {
-        const before = value.substring(0, this.suggestion.matchIndex);
-        const match = value.substring(
-          this.suggestion.matchIndex,
-          this.suggestion.matchIndex + this.suggestion.matchLength
-        );
-        const after = value.substring(this.suggestion.matchIndex + this.suggestion.matchLength);
-        return `${before}<b>${match}</b>${after}`;
+    computed: {
+      content(): string {
+        const value =
+          (this.isComment
+            ? (<{ comment?: string }>this.suggestion.details).comment
+            : this.suggestion.value) || '';
+        if (
+          this.filter &&
+          typeof this.suggestion.matchIndex !== 'undefined' &&
+          this.suggestion.matchIndex > -1 &&
+          typeof this.suggestion.matchLength !== 'undefined' &&
+          ((!this.isComment && !this.suggestion.matchComment) ||
+            (this.isComment && this.suggestion.matchComment))
+        ) {
+          const before = value.substring(0, this.suggestion.matchIndex);
+          const match = value.substring(
+            this.suggestion.matchIndex,
+            this.suggestion.matchIndex + this.suggestion.matchLength
+          );
+          const after = value.substring(this.suggestion.matchIndex + this.suggestion.matchLength);
+          return `${before}<b>${match}</b>${after}`;
+        }
+        return value || '';
       }
-      return value || '';
     }
-  }
+  });
 </script>