composition: some more components

src/components/ftbot/TradeDetail.vue

@@ -99,29 +99,25 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue, Prop } from 'vue-property-decorator';
 import { formatPercent, formatPriceCurrency, formatPrice, timestampms } from '@/shared/formatters';
 import ValuePair from '@/components/general/ValuePair.vue';
 import TradeProfit from '@/components/ftbot/TradeProfit.vue';
 import DateTimeTZ from '@/components/general/DateTimeTZ.vue';
 import { Trade } from '@/types';
 
-@Component({
+import { defineComponent } from '@vue/composition-api';
+
+export default defineComponent({
+  name: 'TradeDetail',
   components: { ValuePair, TradeProfit, DateTimeTZ },
-})
-export default class TradeDetail extends Vue {
-  @Prop({ type: Object, required: true }) trade!: Trade;
-
-  @Prop({ type: String, required: true }) stakeCurrency!: string;
-
-  timestampms = timestampms;
-
-  formatPercent = formatPercent;
-
-  formatPrice = formatPrice;
-
-  formatPriceCurrency = formatPriceCurrency;
-}
+  props: {
+    trade: { required: true, type: Object as () => Trade },
+    stakeCurrency: { required: true, type: String },
+  },
+  setup() {
+    return { timestampms, formatPercent, formatPrice, formatPriceCurrency };
+  },
+});
 </script>
 <style scoped>
 .detail-header {

src/components/general/DateTimeTZ.vue

@@ -4,38 +4,39 @@
 
 <script lang="ts">
 import { timestampms, timestampmsWithTimezone, timestampToDateString } from '@/shared/formatters';
-import { Component, Prop, Vue } from 'vue-property-decorator';
 
-@Component({})
-export default class DateTimeTZ extends Vue {
-  @Prop({ required: true, type: Number }) date!: number;
+import { defineComponent, computed } from '@vue/composition-api';
 
-  @Prop({ required: false, type: Boolean, default: false }) showTimezone!: boolean;
-
-  @Prop({ required: false, type: Boolean, default: false }) dateOnly!: boolean;
-
-  timestampms = timestampms;
-
-  get formattedDate(): string {
-    if (this.dateOnly) {
-      return timestampToDateString(this.date);
+export default defineComponent({
+  name: 'DateTimeTZ',
+  props: {
+    date: { required: true, type: Number },
+    showTimezone: { required: false, type: Boolean, default: false },
+    dateOnly: { required: false, type: Boolean, default: false },
+  },
+  setup(props) {
+    const formattedDate = computed((): string => {
+      if (props.dateOnly) {
+        return timestampToDateString(props.date);
       }
-    if (this.showTimezone) {
-      return timestampmsWithTimezone(this.date);
-    }
-    return timestampms(this.date);
+      if (props.showTimezone) {
+        return timestampmsWithTimezone(props.date);
       }
+      return timestampms(props.date);
+    });
 
-  get timezoneTooltip(): string {
-    const time1 = timestampmsWithTimezone(this.date);
-    const timeUTC = timestampmsWithTimezone(this.date, 'UTC');
+    const timezoneTooltip = computed((): string => {
+      const time1 = timestampmsWithTimezone(props.date);
+      const timeUTC = timestampmsWithTimezone(props.date, 'UTC');
       if (time1 === timeUTC) {
         return timeUTC;
       }
 
       return `${time1}\n${timeUTC}`;
-  }
-}
+    });
+    return { formattedDate, timezoneTooltip };
+  },
+});
 </script>
 
 <style scoped></style>

src/components/general/ProfitPill.vue

@@ -20,41 +20,38 @@
 </template>
 
 <script lang="ts">
-import { formatPercent, formatPrice, timestampms } from '@/shared/formatters';
-import { Component, Prop, Vue } from 'vue-property-decorator';
+import { formatPercent, formatPrice } from '@/shared/formatters';
 
 import ProfitSymbol from '@/components/general/ProfitSymbol.vue';
 
-@Component({ components: { ProfitSymbol } })
-export default class ProfitPill extends Vue {
-  @Prop({ required: false, default: undefined, type: Number }) profitRatio?: number;
+import { defineComponent, computed } from '@vue/composition-api';
 
-  @Prop({ required: false, default: undefined, type: Number }) profitAbs?: number;
-
-  @Prop({ required: true, type: String }) stakeCurrency!: string;
-
-  @Prop({ required: false, default: '', type: String }) profitDesc!: string;
-
-  formatPercent = formatPercent;
-
-  timestampms = timestampms;
-
-  formatPrice = formatPrice;
-
-  get isProfitable() {
+export default defineComponent({
+  name: 'ProfitPill',
+  components: { ProfitSymbol },
+  props: {
+    profitRatio: { required: false, default: undefined, type: Number },
+    profitAbs: { required: false, default: undefined, type: Number },
+    stakeCurrency: { required: true, type: String },
+    profitDesc: { required: false, default: '', type: String },
+  },
+  setup(props) {
+    const isProfitable = computed(() => {
       return (
-      (this.profitRatio !== undefined && this.profitRatio > 0) ||
-      (this.profitRatio === undefined && this.profitAbs !== undefined && this.profitAbs > 0)
+        (props.profitRatio !== undefined && props.profitRatio > 0) ||
+        (props.profitRatio === undefined && props.profitAbs !== undefined && props.profitAbs > 0)
       );
-  }
+    });
 
-  get profitString(): string {
-    if (this.profitRatio !== undefined && this.profitAbs !== undefined) {
-      return `(${formatPrice(this.profitAbs, 3)})`;
+    const profitString = computed((): string => {
+      if (props.profitRatio !== undefined && props.profitAbs !== undefined) {
+        return `(${formatPrice(props.profitAbs, 3)})`;
       }
       return '';
-  }
-}
+    });
+    return { profitString, isProfitable, formatPercent };
+  },
+});
 </script>
 
 <style scoped lang="scss">