refactor: use slot shorthand

- more minor fixes
- remove redundant file

src/components/BackLink.vue

@@ -1,4 +1,4 @@
-<template v-slot:title>
+<template #title>
   <a
     class="cursor-pointer font-semibold flex items-center"
     @click="$router.back()"

src/components/Controls/Color.vue

@@ -4,7 +4,7 @@
       {{ df.label }}
     </div>
     <Popover placement="bottom-end">
-      <template v-slot:target="{ togglePopover }">
+      <template #target="{ togglePopover }">
         <div
           tabindex="0"
           :class="inputClasses"
@@ -25,7 +25,7 @@
           </div>
         </div>
       </template>
-      <template v-slot:content>
+      <template #content>
         <div class="text-sm py-3 px-2 text-center">
           <div>
             <Row class="border-none" :column-count="5" gap="0.5rem">

src/components/DatePicker/DatePicker.vue

@@ -1,6 +1,6 @@
 <template>
   <Popover @open="selectCurrentMonthYear">
-    <template v-slot:target="{ togglePopover, handleBlur }">
+    <template #target="{ togglePopover, handleBlur }">
       <input
         type="text"
         :class="inputClass"
@@ -11,7 +11,7 @@
         @blur="handleBlur"
       />
     </template>
-    <template v-slot:content="{ togglePopover }">
+    <template #content="{ togglePopover }">
       <div class="text-left p-3 select-none">
         <div class="flex items-center justify-between">
           <span class="font-medium text-blue-500 text-base">

src/components/Dropdown.vue

@@ -4,7 +4,7 @@
     :hide-arrow="true"
     :placement="right ? 'bottom-end' : 'bottom-start'"
   >
-    <template v-slot:target>
+    <template #target>
       <div class="h-full" v-on-outside-click="() => (isShown = false)">
         <slot
           :toggleDropdown="toggleDropdown"
@@ -14,7 +14,7 @@
         ></slot>
       </div>
     </template>
-    <template v-slot:content>
+    <template #content>
       <div class="bg-white rounded w-full min-w-40">
         <div class="p-1 max-h-64 overflow-auto text-sm">
           <div v-if="isLoading" class="p-2 text-gray-600 italic">

src/components/DropdownWithAction.vue

@@ -1,22 +0,0 @@
-<template>
-  <Dropdown v-bind="$attrs">
-    <template v-slot="{ toggleDropdown }">
-      <div @click="toggleDropdown()">
-        <slot></slot>
-      </div>
-    </template>
-  </Dropdown>
-</template>
-
-<script>
-import Dropdown from './Dropdown';
-
-export default {
-  name: 'DropdownWithAction',
-  components: {
-    Dropdown
-  }
-};
-</script>
-
-<style></style>

src/components/FilterDropdown.vue

@@ -1,6 +1,6 @@
 <template>
   <Popover @close="emitFilterChange" placement="bottom-end">
-    <template v-slot:target="{ togglePopover }">
+    <template #target="{ togglePopover }">
       <Button :icon="true" @click="togglePopover()">
         <span class="flex items-center">
           <Icon name="filter" size="12" class="stroke-current text-gray-800" />
@@ -15,7 +15,7 @@
         </span>
       </Button>
     </template>
-    <template v-slot:content>
+    <template #content>
       <div>
         <div class="p-3">
           <template v-if="filters.length">

src/pages/ChartOfAccounts.vue

@@ -1,20 +1,19 @@
 <template>
   <div class="flex flex-col overflow-y-hidden">
     <PageHeader>
-      <template v-slot:title>
+      <template #title>
         <h1 class="text-2xl font-bold">
           {{ t('Chart of Accounts') }}
         </h1>
       </template>
-      <template v-slot:actions>
+      <template #actions>
         <SearchBar class="ml-2" />
       </template>
     </PageHeader>
     <div class="flex-1 flex px-8 overflow-y-auto">
       <div class="flex-1" v-if="root">
+        <div v-for="account in allAccounts" :key="account.name">
           <div
-          v-for="account in allAccounts"
-          :key="account.name"
             class="
               mt-2
               px-4
@@ -39,7 +38,10 @@
                 >
                   {{ account.name }}
                 </div>
-              <div v-if="account.isGroup" class="ml-6 hidden group-hover:block">
+                <div
+                  v-if="account.isGroup"
+                  class="ml-6 hidden group-hover:block"
+                >
                   <button
                     class="
                       text-xs text-gray-800
@@ -124,6 +126,7 @@
         </div>
       </div>
     </div>
+  </div>
 </template>
 <script>
 import frappe from 'frappe';

src/pages/Dashboard/Dashboard.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="flex flex-col">
     <PageHeader>
-      <template v-slot:title>
+      <template #title>
         <h1 class="text-2xl font-bold">{{ t('Dashboard') }}</h1>
       </template>
-      <template v-slot:actions>
+      <template #actions>
         <SearchBar class="ml-2" />
       </template>
     </PageHeader>

src/pages/Dashboard/Expenses.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="flex flex-col h-full">
     <SectionHeader>
-      <template v-slot:title>{{ t('Top Expenses') }}</template>
+      <template #title>{{ t('Top Expenses') }}</template>
-      <template v-slot:action>
+      <template #action>
         <PeriodSelector :value="period" @change="(value) => (period = value)" />
       </template>
     </SectionHeader>

src/pages/Dashboard/ProfitAndLoss.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="flex flex-col h-full">
     <SectionHeader>
-      <template v-slot:title>{{ t('Profit and Loss') }}</template>
+      <template #title>{{ t('Profit and Loss') }}</template>
-      <template v-slot:action>
+      <template #action>
         <PeriodSelector
           :value="period"
           :options="['This Year', 'This Quarter']"

src/pages/Dashboard/UnpaidInvoices.vue

@@ -6,8 +6,8 @@
       :key="invoice.title"
     >
       <SectionHeader>
-        <template v-slot:title>{{ invoice.title }}</template>
+        <template #title>{{ invoice.title }}</template>
-        <template v-slot:action>
+        <template #action>
           <PeriodSelector
             v-if="invoice.hasData"
             :value="$data[invoice.periodKey]"

src/pages/GetStarted.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col overflow-y-hidden">
     <PageHeader>
-      <template v-slot:title>
+      <template #title>
         <h1 class="text-2xl font-bold">
           {{ t('Setup your workspace') }}
         </h1>

src/pages/InvoiceForm.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="flex flex-col" v-if="doc">
     <PageHeader>
-      <template v-slot:title>
+      <template #title>
         <BackLink />
       </template>
-      <template v-slot:actions>
+      <template #actions>
         <StatusBadge :status="status" />
         <Button
           v-if="doc.submitted"
@@ -271,7 +271,7 @@ export default {
 
     let query = this.$route.query;
     if (query.values && query.doctype === this.doctype) {
-      this.doc.set(this.$router.currentRoute.query.values);
+      this.doc.set(this.$router.currentRoute.value.query.values);
     }
     this.status = getInvoiceStatus(this.doc);
   },

src/pages/JournalEntryForm.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="flex flex-col">
     <PageHeader>
-      <template v-slot:title>
+      <template #title>
         <BackLink />
       </template>
-      <template v-slot:actions v-if="doc">
+      <template #actions v-if="doc">
         <StatusBadge :status="status" />
         <DropdownWithActions class="ml-2" :actions="actions" />
         <Button

src/pages/ListView/ListView.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="flex flex-col">
     <PageHeader>
-      <template v-slot:title>
+      <template #title>
         <h1 class="text-2xl font-bold" v-if="title">
           {{ title }}
         </h1>
       </template>
-      <template v-slot:actions>
+      <template #actions>
         <FilterDropdown
           ref="filterDropdown"
           @change="applyFilter"

src/pages/PrintView/PrintView.vue

@@ -2,10 +2,10 @@
   <div class="flex">
     <div class="flex flex-col flex-1">
       <PageHeader class="bg-white z-10">
-        <template v-slot:title>
+        <template #title>
           <BackLink />
         </template>
-        <template v-slot:actions>
+        <template #actions>
           <Button
             class="text-gray-900 text-xs ml-2"
             @click="showCustomiser = !showCustomiser"
@@ -54,7 +54,6 @@
 import frappe from 'frappe';
 import PageHeader from '@/components/PageHeader';
 import SearchBar from '@/components/SearchBar';
-import DropdownWithAction from '@/components/DropdownWithAction';
 import Button from '@/components/Button';
 import BackLink from '@/components/BackLink';
 import TwoColumnForm from '@/components/TwoColumnForm';
@@ -68,7 +67,6 @@ export default {
   components: {
     PageHeader,
     SearchBar,
-    DropdownWithAction,
     Button,
     BackLink,
     TwoColumnForm,

src/pages/Report.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="flex flex-col max-w-full">
     <PageHeader>
-      <template v-slot:title>
+      <template #title>
         <h1 class="text-2xl font-bold">{{ report.title }}</h1>
       </template>
-      <template v-slot:actions>
+      <template #actions>
         <DropdownWithActions
           v-for="group of actionGroups"
           @click="group.action(reportData, filters)"

src/pages/Settings/Settings.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col overflow-hidden">
     <PageHeader>
-      <template v-slot:title>
+      <template #title>
         <h1 class="text-2xl font-bold">
           {{ t('Settings') }}
         </h1>
@@ -62,7 +62,7 @@ import PageHeader from '@/components/PageHeader';
 import StatusBadge from '@/components/StatusBadge';
 import { callInitializeMoneyMaker } from '../../utils';
 import { showToast } from '../../utils';
-import { h } from 'vue';
+import { h, markRaw } from 'vue';
 
 export default {
   name: 'Settings',
@@ -82,17 +82,17 @@ export default {
         {
           label: t('Invoice'),
           icon: 'invoice',
-          component: TabInvoice,
+          component: markRaw(TabInvoice),
         },
         {
           label: t('General'),
           icon: 'general',
-          component: TabGeneral,
+          component: markRaw(TabGeneral),
         },
         {
           label: t('System'),
           icon: 'system',
-          component: TabSystem,
+          component: markRaw(TabSystem),
         },
       ],
     };

src/pages/SetupWizard/SetupWizard.vue

@@ -29,7 +29,7 @@
             :autofocus="true"
           />
           <Popover placement="auto" :show-popup="Boolean(emailError)">
-            <template v-slot:target>
+            <template #target>
               <FormControl
                 :df="meta.getField('email')"
                 :value="doc.email"
@@ -41,7 +41,7 @@
                 "
               />
             </template>
-            <template v-slot:content>
+            <template #content>
               <div class="p-2 text-sm">
                 {{ emailError }}
               </div>

src/utils.js

@@ -147,7 +147,7 @@ export function openQuickEdit({
   showFields,
   defaults = {},
 }) {
-  let currentRoute = router.currentRoute;
+  let currentRoute = router.currentRoute.value;
   let query = currentRoute.query;
   let method = 'push';
   if (query.edit && query.doctype === doctype) {
@@ -271,7 +271,10 @@ export function getInvoiceStatus(doc) {
 
 export function routeTo(route) {
   let routeOptions = route;
-  if (typeof route === 'string' && route === router.currentRoute.fullPath) {
+  if (
+    typeof route === 'string' &&
+    route === router.currentRoute.value.fullPath
+  ) {
     return;
   }