Просмотр исходного кода

[ui] Vue 3 - Migrated InlineAlert component

sreenaths 4 лет назад
Родитель
Сommit
cac619ef02
1 измененных файлов с 39 добавлено и 23 удалено
  1. 39 23
      desktop/core/src/desktop/js/components/InlineAlert.vue

+ 39 - 23
desktop/core/src/desktop/js/components/InlineAlert.vue

@@ -46,9 +46,8 @@
 </template>
 </template>
 
 
 <script lang="ts">
 <script lang="ts">
-  import Vue from 'vue';
-  import Component from 'vue-class-component';
-  import { Prop } from 'vue-property-decorator';
+  import { defineComponent, PropType } from 'vue';
+
   import I18n from 'utils/i18n';
   import I18n from 'utils/i18n';
 
 
   export enum AlertType {
   export enum AlertType {
@@ -80,29 +79,46 @@
     [AlertType.Unknown, UNKNOWN_DEF]
     [AlertType.Unknown, UNKNOWN_DEF]
   ]);
   ]);
 
 
-  @Component({
+  export default defineComponent({
+    props: {
+      type: {
+        type: Object as PropType<AlertType>,
+        required: true,
+        default: AlertType.Unknown
+      },
+
+      message: {
+        type: String,
+        default: undefined
+      },
+      details: {
+        type: String,
+        default: undefined
+      },
+
+      showClose: Boolean
+    },
+
+    emits: ['close'],
+
+    data(): {
+      showDetails: boolean;
+    } {
+      return {
+        showDetails: false
+      };
+    },
+
+    computed: {
+      definition(): AlertDef {
+        return TYPE_DEFS.get(this.type) || UNKNOWN_DEF;
+      }
+    },
+
     methods: {
     methods: {
       I18n
       I18n
     }
     }
-  })
-  export default class InlineAlert extends Vue {
-    @Prop({ required: true, default: AlertType.Unknown })
-    type!: AlertType;
-
-    @Prop()
-    message!: string;
-    @Prop()
-    details!: string;
-
-    @Prop({ default: false })
-    showClose!: boolean;
-
-    showDetails = false;
-
-    get definition(): AlertDef {
-      return TYPE_DEFS.get(this.type) || UNKNOWN_DEF;
-    }
-  }
+  });
 </script>
 </script>
 
 
 <style lang="scss" scoped>
 <style lang="scss" scoped>