script setup - more components

src/components/ftbot/BotStatus.vue

@@ -79,23 +79,11 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { formatPercent, formatPriceCurrency } from '@/shared/formatters';
 import DateTimeTZ from '@/components/general/DateTimeTZ.vue';
 
-import { defineComponent } from 'vue';
 import { useBotStore } from '@/stores/ftbotwrapper';
 
-export default defineComponent({
-  name: 'BotStatus',
-  components: { DateTimeTZ },
-  setup() {
-    const botStore = useBotStore();
-    return {
-      formatPercent,
-      formatPriceCurrency,
-      botStore,
-    };
-  },
-});
+const botStore = useBotStore();
 </script>

src/components/ftbot/LogViewer.vue

@@ -5,33 +5,23 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { useBotStore } from '@/stores/ftbotwrapper';
-import { defineComponent, onMounted, computed } from 'vue';
+import { onMounted, computed } from 'vue';
 
-export default defineComponent({
-  name: 'LogViewer',
-  setup() {
-    const botStore = useBotStore();
+const botStore = useBotStore();
 
-    onMounted(async () => {
-      botStore.activeBot.getLogs();
-    });
+onMounted(async () => {
+  botStore.activeBot.getLogs();
+});
 
-    const formattedLogs = computed(() => {
-      let result = '';
-      for (let i = 0, len = botStore.activeBot.lastLogs.length; i < len; i += 1) {
-        const log = botStore.activeBot.lastLogs[i];
-        result += `${log[0]} - ${log[2]} - ${log[3]} - ${log[4]}\n`;
-      }
-      return result;
-    });
-
-    return {
-      botStore,
-      formattedLogs,
-    };
-  },
+const formattedLogs = computed(() => {
+  let result = '';
+  for (let i = 0, len = botStore.activeBot.lastLogs.length; i < len; i += 1) {
+    const log = botStore.activeBot.lastLogs[i];
+    result += `${log[0]} - ${log[2]} - ${log[3]} - ${log[4]}\n`;
+  }
+  return result;
 });
 </script>
 

src/components/ftbot/ReloadControl.vue

@@ -17,27 +17,17 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, computed } from 'vue';
+<script setup lang="ts">
+import { computed } from 'vue';
 import { useBotStore } from '@/stores/ftbotwrapper';
 
-export default defineComponent({
-  name: 'ReloadControl',
-  setup() {
-    const botStore = useBotStore();
-    const autoRefreshLoc = computed({
-      get() {
-        return botStore.globalAutoRefresh;
-      },
-      set(newValue: boolean) {
-        botStore.setGlobalAutoRefresh(newValue);
-      },
-    });
-
-    return {
-      botStore,
-      autoRefreshLoc,
-    };
+const botStore = useBotStore();
+const autoRefreshLoc = computed({
+  get() {
+    return botStore.globalAutoRefresh;
+  },
+  set(newValue: boolean) {
+    botStore.setGlobalAutoRefresh(newValue);
   },
 });
 </script>

src/components/ftbot/TradeDetail.vue

@@ -128,25 +128,16 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 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';
 
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  name: 'TradeDetail',
-  components: { ValuePair, TradeProfit, DateTimeTZ },
-  props: {
-    trade: { required: true, type: Object as () => Trade },
-    stakeCurrency: { required: true, type: String },
-  },
-  setup() {
-    return { timestampms, formatPercent, formatPrice, formatPriceCurrency };
-  },
+defineProps({
+  trade: { required: true, type: Object as () => Trade },
+  stakeCurrency: { required: true, type: String },
 });
 </script>
 <style scoped>

src/components/general/DateTimeTZ.vue

@@ -2,40 +2,34 @@
   <span :title="timezoneTooltip">{{ formattedDate }}</span>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { timestampms, timestampmsWithTimezone, timestampToDateString } from '@/shared/formatters';
 
-import { defineComponent, computed } from 'vue';
+import { computed } from 'vue';
 
-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 (props.showTimezone) {
-        return timestampmsWithTimezone(props.date);
-      }
-      return timestampms(props.date);
-    });
+const props = defineProps({
+  date: { required: true, type: Number },
+  showTimezone: { required: false, type: Boolean, default: false },
+  dateOnly: { required: false, type: Boolean, default: false },
+});
+const formattedDate = computed((): string => {
+  if (props.dateOnly) {
+    return timestampToDateString(props.date);
+  }
+  if (props.showTimezone) {
+    return timestampmsWithTimezone(props.date);
+  }
+  return timestampms(props.date);
+});
 
-    const timezoneTooltip = computed((): string => {
-      const time1 = timestampmsWithTimezone(props.date);
-      const timeUTC = timestampmsWithTimezone(props.date, 'UTC');
-      if (time1 === timeUTC) {
-        return timeUTC;
-      }
+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 };
-  },
+  return `${time1}\n${timeUTC}`;
 });
 </script>
 

src/components/general/ValuePair.vue

@@ -10,20 +10,14 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import InfoBox from '@/components/general/InfoBox.vue';
 
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  name: 'ValuePair',
-  components: { InfoBox },
-  props: {
-    description: { type: String, required: true },
-    help: { type: String, default: '', required: false },
-    classLabel: { type: String, default: 'col-4 fw-bold mb-0' },
-    classValue: { type: String, default: 'col-8' },
-  },
+defineProps({
+  description: { type: String, required: true },
+  help: { type: String, default: '', required: false },
+  classLabel: { type: String, default: 'col-4 fw-bold mb-0' },
+  classValue: { type: String, default: 'col-8' },
 });
 </script>
 

src/views/LogView.vue

@@ -4,14 +4,8 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script setup lang="ts">
 import LogViewer from '@/components/ftbot/LogViewer.vue';
-
-export default defineComponent({
-  name: 'LogView',
-  components: { LogViewer },
-});
 </script>
 
 <style scoped></style>

src/views/TradesList.vue

@@ -40,29 +40,15 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import CustomTradeList from '@/components/ftbot/CustomTradeList.vue';
 import TradeDetail from '@/components/ftbot/TradeDetail.vue';
 import { useBotStore } from '@/stores/ftbotwrapper';
-import { defineComponent } from 'vue';
 
-export default defineComponent({
-  name: 'TradesList',
-  components: {
-    CustomTradeList,
-    TradeDetail,
-  },
-  props: {
-    history: { default: false, type: Boolean },
-  },
-  setup() {
-    const botStore = useBotStore();
-
-    return {
-      botStore,
-    };
-  },
+defineProps({
+  history: { default: false, type: Boolean },
 });
+const botStore = useBotStore();
 </script>
 
 <style scoped></style>