Pārlūkot izejas kodu

[ui] Vue 3 - Migrated Duration component

sreenaths 4 gadi atpakaļ
vecāks
revīzija
25b481530d
1 mainītis faili ar 15 papildinājumiem un 12 dzēšanām
  1. 15 12
      desktop/core/src/desktop/js/components/Duration.vue

+ 15 - 12
desktop/core/src/desktop/js/components/Duration.vue

@@ -21,11 +21,10 @@
 </template>
 
 <script lang="ts">
+  import { defineComponent } from 'vue';
+
   import { Duration as LuxonDuration, DurationUnit } from 'luxon';
   import I18n from '../utils/i18n';
-  import Vue from 'vue';
-  import Component from 'vue-class-component';
-  import { Prop } from 'vue-property-decorator';
 
   const SHORT_LIMITS = [
     { unit: <DurationUnit>'years', postfix: 'year', appendS: true },
@@ -50,17 +49,21 @@
     return luxonDuration.toFormat('hh:mm:ss');
   };
 
-  @Component
-  export default class Duration extends Vue {
-    @Prop({ required: true })
-    value!: number;
-    @Prop({ required: false })
-    short?: boolean;
+  export default defineComponent({
+    props: {
+      value: {
+        type: Number,
+        required: true
+      },
+      short: Boolean
+    },
 
-    get duration(): string {
-      return duration(this.value, this.short);
+    computed: {
+      duration(): string {
+        return duration(this.value, this.short);
+      }
     }
-  }
+  });
 </script>
 
 <style lang="scss" scoped></style>