Эх сурвалжийг харах

[ui] Vue 3 - Migrated Tab component

sreenaths 4 жил өмнө
parent
commit
d458a8b3a9

+ 37 - 22
desktop/core/src/desktop/js/components/Tab.vue

@@ -23,44 +23,59 @@
 </template>
 
 <script lang="ts">
-  import Vue from 'vue';
-  import Component from 'vue-class-component';
-  import { Inject, Prop, Watch } from 'vue-property-decorator';
+  import { defineComponent, inject, Component } from 'vue';
 
-  @Component
-  export default class Tab extends Vue {
-    @Inject()
-    addTab?: (tab: Tab) => void;
-    @Inject()
-    removeTab?: (tab: Tab) => void;
+  const Tab:Component = defineComponent({
+    name: 'Tab',
+    props: {
+      title: {
+        type: String,
+        required: true
+      },
+      lazy: {
+        type: Boolean,
+        default: false
+      }
+    },
+
+    setup(): {
+      addTab?: (tab: typeof Tab) => void,
+      removeTab?: (tab: typeof Tab) => void,
 
-    @Prop({ required: true })
-    title!: string;
-    @Prop({ default: false })
-    lazy!: boolean;
+        isActive: boolean,
+        rendered: boolean
+    } {
+      return {
+        addTab: inject('addTab'),
+        removeTab: inject('removeTab'),
 
-    isActive = false;
-    rendered = false;
+        isActive: false,
+        rendered: false
+      };
+    },
 
-    @Watch('isActive')
-    onActive(): void {
-      if (this.isActive) {
-        this.rendered = true;
+    watch: {
+      isActive(): void {
+        if (this.isActive) {
+          this.rendered = true;
+        }
       }
-    }
+    },
 
     mounted(): void {
       if (this.addTab) {
         this.addTab(this);
       }
-    }
+    },
 
     destroyed(): void {
       if (this.removeTab) {
         this.removeTab(this);
       }
     }
-  }
+  })
+
+  export default Tab;
 </script>
 
 <style lang="scss" scoped></style>