chore: Update internal component styles to PascalCase

src/components/BotList.vue

@@ -14,14 +14,14 @@
         @click="botStore.selectBot(bot.botId)"
       >
         <i-mdi-reorder-horizontal v-if="!small" class="handle me-2 fs-4" />
-        <bot-rename
+        <BotRename
           v-if="editingBots.includes(bot.botId)"
           :bot="bot"
           @saved="stopEditBot(bot.botId)"
           @cancelled="stopEditBot(bot.botId)"
         />
 
-        <bot-entry
+        <BotEntry
           v-else
           :bot="bot"
           :no-buttons="small"

src/components/charts/CandleChartContainer.vue

@@ -4,7 +4,7 @@
       <div class="d-flex me-0">
         <div class="ms-1 ms-md-2 d-flex flex-wrap flex-md-nowrap align-items-center w-auto">
           <span class="ms-md-2 text-nowrap">{{ strategyName }} | {{ timeframe || '' }}</span>
-          <v-select
+          <VSelect
             v-model="botStore.activeBot.plotPair"
             class="ms-md-2"
             :options="availablePairs"
@@ -13,7 +13,7 @@
             :clearable="false"
             @input="refresh"
           >
-          </v-select>
+          </VSelect>
 
           <b-button
             title="Refresh chart"
@@ -85,11 +85,11 @@
             </p>
           </div>
         </div>
-        <transition name="fade">
+        <Transition name="fade">
           <div v-if="!plotConfigModal" v-show="showPlotConfig" class="w-25">
             <PlotConfigurator :columns="datasetColumns" :is-visible="showPlotConfig ?? false" />
           </div>
-        </transition>
+        </Transition>
       </div>
     </div>
     <b-modal
@@ -109,7 +109,7 @@
 import { usePlotConfigStore } from '@/stores/plotConfig';
 import { useSettingsStore } from '@/stores/settings';
 import { ChartSliderPosition, LoadingStatus, PairHistory, Trade } from '@/types';
-import vSelect from 'vue-select';
+import VSelect from 'vue-select';
 
 import { useBotStore } from '@/stores/ftbotwrapper';
 

src/components/charts/PlotConfigurator.vue

@@ -1,12 +1,12 @@
 <template>
   <div v-if="columns">
     <b-form-group label="Plot config name" label-for="idPlotConfigName">
-      <plot-config-select allow-edit></plot-config-select>
+      <PlotConfigSelect allow-edit></PlotConfigSelect>
     </b-form-group>
     <div class="col-mb-3">
       <hr />
       <b-form-group label="Target Plot" label-for="FieldSel">
-        <edit-value
+        <EditValue
           v-model="selSubPlot"
           :allow-edit="!isMainPlot"
           allow-add
@@ -18,7 +18,7 @@
         >
           <b-form-select id="FieldSel" v-model="selSubPlot" :options="subplots" :select-size="5">
           </b-form-select>
-        </edit-value>
+        </EditValue>
       </b-form-group>
     </div>
     <hr />
@@ -68,12 +68,7 @@
       @indicator-selected="addNewIndicatorSelected"
     />
 
-    <plot-indicator
+    <PlotIndicator v-if="selIndicatorName" v-model="selIndicator" class="mt-1" :columns="columns" />
-      v-if="selIndicatorName"
-      v-model="selIndicator"
-      class="mt-1"
-      :columns="columns"
-    />
     <hr />
 
     <div class="d-flex flex-row">

src/components/charts/PlotIndicatorSelect.vue

@@ -1,14 +1,14 @@
 <template>
   <div class="d-flex flex-row">
     <b-form-group class="flex-grow-1" :label="label" label-for="indicatorSelector">
-      <v-select
+      <VSelect
         v-model="selAvailableIndicator"
         :options="columns"
         size="sm"
         :clearable="false"
         @option:selected="emitIndicator"
       >
-      </v-select>
+      </VSelect>
     </b-form-group>
     <b-button size="sm" title="Abort" class="ms-1 mt-auto" variant="secondary" @click="abort">
       <i-mdi-close />
@@ -17,7 +17,7 @@
 </template>
 
 <script setup lang="ts">
-import vSelect from 'vue-select';
+import VSelect from 'vue-select';
 
 const props = defineProps({
   modelValue: { required: false, default: '', type: String },

src/components/ftbot/BotComparisonList.vue

@@ -28,7 +28,7 @@
       </div>
     </template>
     <template #cell(profitOpen)="{ item }">
-      <profit-pill
+      <ProfitPill
         v-if="item.profitOpen && item.botId != 'Summary'"
         :profit-ratio="(item as unknown as ComparisonTableItems).profitOpenRatio"
         :profit-abs="(item as unknown as ComparisonTableItems).profitOpen"
@@ -39,7 +39,7 @@
       />
     </template>
     <template #cell(profitClosed)="{ item }">
-      <profit-pill
+      <ProfitPill
         v-if="item.profitClosed && item.botId != 'Summary'"
         :profit-ratio="(item as unknown as ComparisonTableItems).profitClosedRatio"
         :profit-abs="(item as unknown as ComparisonTableItems).profitClosed"

src/components/ftbot/TradeActionsPopover.vue

@@ -62,7 +62,7 @@ function handleForceEntry(item: Trade) {
       :show="popoverOpen"
       placement="left"
     >
-      <trade-actions
+      <TradeActions
         :trade="trade"
         :bot-api-version="botApiVersion"
         :enable-force-entry="enableForceEntry"

src/components/ftbot/TradeDetail.vue

@@ -28,16 +28,16 @@
           v-if="trade.is_open && trade.realized_profit && !trade.total_profit_abs"
           description="Realized Profit"
         >
-          <trade-profit class="ms-2" :trade="trade" mode="realized" />
+          <TradeProfit class="ms-2" :trade="trade" mode="realized" />
         </ValuePair>
         <ValuePair v-if="trade.is_open && trade.total_profit_abs" description="Total Profit">
-          <trade-profit class="ms-2" :trade="trade" mode="total" />
+          <TradeProfit class="ms-2" :trade="trade" mode="total" />
         </ValuePair>
         <ValuePair
           v-if="trade.profit_ratio && trade.profit_abs"
           :description="`${trade.is_open ? 'Current Profit' : 'Close Profit'}`"
         >
-          <trade-profit class="ms-2" :trade="trade" />
+          <TradeProfit class="ms-2" :trade="trade" />
         </ValuePair>
         <details>
           <summary>Details</summary>

src/components/ftbot/TradeList.vue

@@ -58,7 +58,7 @@
         {{ row.item.trading_mode !== 'spot' ? `(${row.item.leverage}x)` : '' }}
       </template>
       <template #cell(profit)="row">
-        <trade-profit :trade="row.item as unknown as Trade" />
+        <TradeProfit :trade="row.item as unknown as Trade" />
       </template>
       <template #cell(open_timestamp)="row">
         <DateTimeTZ :date="(row.item as unknown as Trade).open_timestamp" />
@@ -79,7 +79,7 @@
         <b-form-input id="trade-filter" v-model="filterText" type="text" placeholder="Filter" />
       </b-form-group>
     </div>
-    <force-exit-form v-if="activeTrades" v-model="forceExitVisible" :trade="feTrade" />
+    <ForceExitForm v-if="activeTrades" v-model="forceExitVisible" :trade="feTrade" />
     <ForceEntryForm
       v-model="increasePosition.visible"
       :pair="increasePosition.trade?.pair"

src/components/general/BaseAlert.vue

@@ -2,7 +2,7 @@
 const alertStore = useAlertsStore();
 </script>
 <template>
-  <teleport to="body">
+  <Teleport to="body">
     <div class="toast-container position-fixed p-3 top-0 mt-5 end-0">
       <BToast
         v-for="(alert, idx) in alertStore.activeMessages"
@@ -15,7 +15,7 @@ const alertStore = useAlertsStore();
         {{ alert.message }}
       </BToast>
     </div>
-  </teleport>
+  </Teleport>
 </template>
 
 <style lang="scss" scoped></style>

src/components/general/ProfitPill.vue

@@ -4,7 +4,7 @@
     :class="isProfitable ? 'profit-pill-profit' : ''"
     :title="profitDesc"
   >
-    <profit-symbol :profit="(profitRatio || profitAbs) ?? 0" />
+    <ProfitSymbol :profit="(profitRatio || profitAbs) ?? 0" />
 
     <div class="d-flex justify-content-center align-items-center flex-grow-1">
       {{ profitRatio !== undefined ? formatPercent(profitRatio, 2) : '' }}

src/components/layout/BodyLayout.vue

@@ -1,6 +1,6 @@
 <template>
   <main>
-    <router-view />
+    <RouterView />
   </main>
 </template>
 

src/components/layout/NavBar.vue

@@ -1,10 +1,10 @@
 <template>
   <header>
     <b-navbar toggleable="sm" dark variant="primary">
-      <router-link class="navbar-brand" exact to="/">
+      <RouterLink class="navbar-brand" exact to="/">
         <img class="logo" src="@/assets/freqtrade-logo.png" alt="Home Logo" />
         <span class="navbar-brand-title d-sm-none d-md-inline">Freqtrade UI</span>
-      </router-link>
+      </RouterLink>
 
       <!-- TODO: For XS breakpoint, this should be here...  -->
       <!-- <ReloadControl class="me-3" /> -->
@@ -25,7 +25,7 @@
             to="/pairlist_config"
             >Pairlist Config</b-nav-item
           >
-          <theme-select />
+          <ThemeSelect />
         </b-navbar-nav>
 
         <!-- Right aligned nav items -->

src/components/layout/NavFooter.vue

@@ -3,46 +3,46 @@
     <!-- Only visible on xs (phone) viewport! -->
     <hr class="my-0" />
     <div class="d-flex flex-align-center justify-content-between px-2">
-      <router-link
+      <RouterLink
         v-if="!botStore.canRunBacktest"
         class="nav-link navbar-nav align-items-center"
         to="/open_trades"
       >
         <i-mdi-folder-open height="24" width="24" />
         Trades
-      </router-link>
+      </RouterLink>
-      <router-link
+      <RouterLink
         v-if="!botStore.canRunBacktest"
         class="nav-link navbar-nav align-items-center"
         to="/trade_history"
       >
         <i-mdi-folder-lock height="24" width="24" />
         History
-      </router-link>
+      </RouterLink>
-      <router-link
+      <RouterLink
         v-if="!botStore.canRunBacktest"
         class="nav-link navbar-nav align-items-center"
         to="/pairlist"
       >
         <i-mdi-view-list height="24" width="24" />
         Pairlist
-      </router-link>
+      </RouterLink>
-      <router-link
+      <RouterLink
         v-if="!botStore.canRunBacktest"
         class="nav-link navbar-nav align-items-center"
         to="/balance"
       >
         <i-mdi-bank height="24" width="24" />
         Balance
-      </router-link>
+      </RouterLink>
-      <router-link
+      <RouterLink
         v-if="!botStore.canRunBacktest"
         class="nav-link navbar-nav align-items-center"
         to="/dashboard"
       >
         <i-mdi-view-dashboard-outline height="24" width="24" />
         Dashboard
-      </router-link>
+      </RouterLink>
     </div>
   </footer>
 </template>

src/views/BacktestingView.vue

@@ -93,7 +93,7 @@
           <i-mdi-chevron-right v-if="!showLeftBar" width="24" height="24" />
           <i-mdi-chevron-left v-if="showLeftBar" width="24" height="24" />
         </b-button>
-        <transition name="fade">
+        <Transition name="fade">
           <BacktestResultSelect
             v-if="showLeftBar"
             :backtest-history="botStore.activeBot.backtestHistory"
@@ -103,7 +103,7 @@
             @remove-result="botStore.activeBot.removeBacktestResultFromMemory"
             @update-result="botStore.activeBot.saveBacktestResultMetadata"
           />
-        </transition>
+        </Transition>
       </div>
       <!-- End Left bar -->
       <div class="d-flex flex-column flex-fill mw-100">

src/views/DashboardView.vue

@@ -47,7 +47,7 @@
         drag-allow-from=".drag-header"
       >
         <DraggableContainer header="Bot comparison">
-          <bot-comparison-list />
+          <BotComparisonList />
         </DraggableContainer>
       </grid-item>
       <grid-item

src/views/Error404View.vue

@@ -4,7 +4,7 @@
     <p class="h4">Ahhhhhhhh! The page you are looking for does not exist.</p>
     <p>
       Don't worry, you can head back to
-      <router-link to="/"> <span>the main page</span> </router-link>.
+      <RouterLink to="/"> <span>the main page</span> </RouterLink>.
     </p>
   </div>
 </template>

src/views/HomeView.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="home">
     <div class="d-flex justify-content-center">
-      <bot-list />
+      <BotList />
     </div>
     <hr />
     <!-- <img alt="Freqtrade logo" src="../assets/freqtrade-logo.png" width="450px" class="my-5" /> -->