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,122 +1,125 @@
 <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"
-          class="
-            mt-2
-            px-4
-            py-2
-            cursor-pointer
-            hover:bg-gray-100
-            rounded-md
-            group
-          "
-          :class="[
-            account.level !== 0 ? 'text-base' : 'text-lg',
-            isQuickEditOpen(account) ? 'bg-gray-200' : '',
-          ]"
-          @click="onClick(account)"
-        >
-          <div class="flex items-center" :class="`pl-${account.level * 8}`">
-            <component :is="getIconComponent(account)" />
-            <div class="flex items-baseline">
-              <div
-                class="ml-3"
-                :class="[!account.parentAccount && 'font-semibold']"
-              >
-                {{ account.name }}
-              </div>
-              <div v-if="account.isGroup" class="ml-6 hidden group-hover:block">
-                <button
-                  class="
-                    text-xs text-gray-800
-                    hover:text-gray-900
-                    focus:outline-none
-                  "
-                  @click.stop="addAccount(account, 'addingAccount')"
+        <div v-for="account in allAccounts" :key="account.name">
+          <div
+            class="
+              mt-2
+              px-4
+              py-2
+              cursor-pointer
+              hover:bg-gray-100
+              rounded-md
+              group
+            "
+            :class="[
+              account.level !== 0 ? 'text-base' : 'text-lg',
+              isQuickEditOpen(account) ? 'bg-gray-200' : '',
+            ]"
+            @click="onClick(account)"
+          >
+            <div class="flex items-center" :class="`pl-${account.level * 8}`">
+              <component :is="getIconComponent(account)" />
+              <div class="flex items-baseline">
+                <div
+                  class="ml-3"
+                  :class="[!account.parentAccount && 'font-semibold']"
                 >
-                  {{ t('Add Account') }}
-                </button>
-                <button
-                  class="
-                    ml-3
-                    text-xs text-gray-800
-                    hover:text-gray-900
-                    focus:outline-none
-                  "
-                  @click.stop="addAccount(account, 'addingGroupAccount')"
+                  {{ account.name }}
+                </div>
+                <div
+                  v-if="account.isGroup"
+                  class="ml-6 hidden group-hover:block"
                 >
-                  {{ t('Add Group') }}
-                </button>
+                  <button
+                    class="
+                      text-xs text-gray-800
+                      hover:text-gray-900
+                      focus:outline-none
+                    "
+                    @click.stop="addAccount(account, 'addingAccount')"
+                  >
+                    {{ t('Add Account') }}
+                  </button>
+                  <button
+                    class="
+                      ml-3
+                      text-xs text-gray-800
+                      hover:text-gray-900
+                      focus:outline-none
+                    "
+                    @click.stop="addAccount(account, 'addingGroupAccount')"
+                  >
+                    {{ t('Add Group') }}
+                  </button>
+                </div>
               </div>
             </div>
           </div>
-        </div>
-        <div
-          v-if="account.addingAccount || account.addingGroupAccount"
-          class="
-            mt-2
-            px-4
-            py-2
-            cursor-pointer
-            hover:bg-gray-100
-            rounded-md
-            group
-          "
-          :class="[account.level !== 0 ? 'text-base' : 'text-lg']"
-          :key="account.name + '-adding-account'"
-        >
           <div
-            class="flex items-center"
-            :class="`pl-${(account.level + 1) * 8}`"
+            v-if="account.addingAccount || account.addingGroupAccount"
+            class="
+              mt-2
+              px-4
+              py-2
+              cursor-pointer
+              hover:bg-gray-100
+              rounded-md
+              group
+            "
+            :class="[account.level !== 0 ? 'text-base' : 'text-lg']"
+            :key="account.name + '-adding-account'"
           >
-            <component
-              :is="getIconComponent({ isGroup: account.addingGroupAccount })"
-            />
-            <div class="flex items-baseline">
-              <div class="ml-3">
-                <input
-                  class="focus:outline-none bg-transparent"
-                  :class="{ 'text-gray-600': insertingAccount }"
-                  :placeholder="t('New Account')"
-                  :ref="account.name"
-                  @keydown.esc="cancelAddingAccount(account)"
-                  @keydown.enter="
-                    (e) =>
-                      createNewAccount(
-                        e.target.value,
-                        account,
-                        account.addingGroupAccount
-                      )
-                  "
-                  type="text"
-                  :disabled="insertingAccount"
-                />
-                <button
-                  v-if="!insertingAccount"
-                  class="
-                    ml-4
-                    text-xs text-gray-800
-                    hover:text-gray-900
-                    focus:outline-none
-                  "
-                  @click="cancelAddingAccount(account)"
-                >
-                  {{ t('Cancel') }}
-                </button>
+            <div
+              class="flex items-center"
+              :class="`pl-${(account.level + 1) * 8}`"
+            >
+              <component
+                :is="getIconComponent({ isGroup: account.addingGroupAccount })"
+              />
+              <div class="flex items-baseline">
+                <div class="ml-3">
+                  <input
+                    class="focus:outline-none bg-transparent"
+                    :class="{ 'text-gray-600': insertingAccount }"
+                    :placeholder="t('New Account')"
+                    :ref="account.name"
+                    @keydown.esc="cancelAddingAccount(account)"
+                    @keydown.enter="
+                      (e) =>
+                        createNewAccount(
+                          e.target.value,
+                          account,
+                          account.addingGroupAccount
+                        )
+                    "
+                    type="text"
+                    :disabled="insertingAccount"
+                  />
+                  <button
+                    v-if="!insertingAccount"
+                    class="
+                      ml-4
+                      text-xs text-gray-800
+                      hover:text-gray-900
+                      focus:outline-none
+                    "
+                    @click="cancelAddingAccount(account)"
+                  >
+                    {{ t('Cancel') }}
+                  </button>
+                </div>
               </div>
             </div>
           </div>

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 v-slot:action>
+      <template #title>{{ t('Top Expenses') }}</template>
+      <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 v-slot:action>
+      <template #title>{{ t('Profit and Loss') }}</template>
+      <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 v-slot:action>
+        <template #title>{{ invoice.title }}</template>
+        <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;
   }