upgrade to quasar v2 and vue3 initial

package.json

@@ -15,15 +15,15 @@
     "axios": "^0.21.1",
     "dotenv": "^8.2.0",
     "prismjs": "^1.22.0",
-    "qrcode.vue": "^1.7.0",
-    "quasar": "^1.15.20",
-    "vue-apexcharts": "^1.6.0",
-    "vue-prism-editor": "^1.2.2"
+    "qrcode.vue": "^3.2.0",
+    "quasar": "^2.0.0-beta.16",
+    "vue-prism-editor": "^2.0.0-alpha.2",
+    "vue3-apexcharts": "^1.4.0"
   },
   "devDependencies": {
-    "@quasar/app": "^2.2.10",
-    "@quasar/cli": "^1.2.1",
-    "core-js": "^3.14.0",
+    "@quasar/app": "^3.0.0-beta.24",
+    "@quasar/cli": "^1.1.3",
+    "core-js": "^3.11.2",
     "eslint-plugin-cypress": "^2.11.2",
     "flush-promises": "^1.0.2",
     "fs-extra": "^9.1.0"

quasar.conf.js

@@ -69,15 +69,7 @@ module.exports = function () {
     // https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-framework
     framework: {
       iconSet: 'material-icons', // Quasar icon set
-      lang: 'en-us', // Quasar language pack
-
-      // * 'auto' - Auto-import needed Quasar components & directives
-      //            (slightly higher compile time; next to minimum bundle size; most convenient)
-      // * false  - Manually specify what to import
-      //            (fastest compile time; minimum bundle size; most tedious)
-      // * true   - Import everything from Quasar
-      //            (not treeshaking Quasar; biggest bundle size; convenient)
-      importStrategy: 'auto',
+      lang: 'en-US', // Quasar language pack
 
       // Quasar plugins
       plugins: [

src/App.vue

@@ -1,7 +1,5 @@
 <template>
-  <div id="q-app">
-    <router-view />
-  </div>
+  <router-view />
 </template>
 
 <script>

src/boot/axios.js

@@ -1,4 +1,3 @@
-import Vue from 'vue';
 import axios from 'axios';
 import { Notify } from "quasar"
 
@@ -14,9 +13,9 @@ export const getBaseUrl = () => {
   }
 };
 
-export default function ({ router, store }) {
+export default function ({ app, router, store }) {
 
-  Vue.prototype.$axios = axios;
+  app.config.globalProperties.$axios = axios;
 
   axios.interceptors.request.use(
     function (config) {

src/components/AdminManager.vue

@@ -5,7 +5,7 @@
         <q-btn ref="refresh" @click="refresh" class="q-mr-sm" dense flat push icon="refresh" />User Administration
         <q-space />
         <q-btn dense flat icon="close" v-close-popup>
-          <q-tooltip content-class="bg-white text-primary">Close</q-tooltip>
+          <q-tooltip class="bg-white text-primary">Close</q-tooltip>
         </q-btn>
       </q-bar>
       <div class="q-pa-md">
@@ -14,10 +14,10 @@
         </div>
         <q-table
           dense
-          :data="users"
+          :rows="users"
           :columns="columns"
-          :pagination.sync="pagination"
-          :selected.sync="selected"
+          :v-model:pagination="pagination"
+          :v-model:selected="selected"
           selection="single"
           row-key="id"
           binary-state-sort

src/components/AgentTable.vue

@@ -5,7 +5,7 @@
       :table-class="{ 'table-bgcolor': !$q.dark.isActive, 'table-bgcolor-dark': $q.dark.isActive }"
       class="agents-tbl-sticky"
       :style="{ 'max-height': agentTableHeight }"
-      :data="frame"
+      :rows="frame"
       :filter="search"
       :filter-method="filterTable"
       :columns="columns"
@@ -13,7 +13,7 @@
       row-key="id"
       binary-state-sort
       virtual-scroll
-      :pagination.sync="pagination"
+      :v-model:pagination="pagination"
       :rows-per-page-options="[0]"
       no-data-label="No Agents"
     >
@@ -75,7 +75,7 @@
         </q-th>
       </template>
       <!-- body slots -->
-      <template slot="body" slot-scope="props" :props="props">
+      <template v-slot:body="props">
         <q-tr
           @contextmenu="agentRowSelected(props.row.id, props.row.agent_id)"
           :props="props"
@@ -396,16 +396,16 @@
     </q-inner-loading>
     <!-- edit agent modal -->
     <q-dialog v-model="showEditAgentModal">
-      <EditAgent @close="showEditAgentModal = false" @edited="agentEdited" />
+      <EditAgent @close="showEditAgentModal = false" @edit="agentEdited" />
     </q-dialog>
     <!-- reboot later modal -->
     <q-dialog v-model="showRebootLaterModal">
-      <RebootLater @close="showRebootLaterModal = false" @edited="agentEdited" />
+      <RebootLater @close="showRebootLaterModal = false" @edit="agentEdited" />
     </q-dialog>
     <!-- pending actions modal -->
     <div class="q-pa-md q-gutter-sm">
       <q-dialog v-model="showPendingActions" @hide="closePendingActionsModal">
-        <PendingActions :agentpk="pendingActionAgentPk" @close="closePendingActionsModal" @edited="agentEdited" />
+        <PendingActions :agentpk="pendingActionAgentPk" @close="closePendingActionsModal" @edit="agentEdited" />
       </q-dialog>
     </div>
     <!-- send command modal -->
@@ -438,6 +438,7 @@ import RunScript from "@/components/modals/agents/RunScript";
 export default {
   name: "AgentTable",
   props: ["frame", "columns", "tab", "userName", "search", "visibleColumns"],
+  emits: ["edit"],
   components: {
     EditAgent,
     RebootLater,
@@ -594,7 +595,7 @@ export default {
         });
     },
     agentEdited() {
-      this.$emit("refreshEdit");
+      this.$emit("edit");
     },
     showPendingActionsModal(pk) {
       this.showPendingActions = true;
@@ -748,12 +749,13 @@ export default {
       this.$q
         .dialog({
           component: PolicyAdd,
-          parent: this,
-          type: "agent",
-          object: agent,
+          componentProps: {
+            type: "agent",
+            object: agent,
+          },
         })
         .onOk(() => {
-          this.$emit("refreshEdit");
+          this.$emit("edit");
         });
     },
     toggleMaintenance(agent) {
@@ -766,7 +768,7 @@ export default {
       const text = agent.maintenance_mode ? "Maintenance mode was disabled" : "Maintenance mode was enabled";
       this.$store.dispatch("toggleMaintenanceMode", data).then(response => {
         this.notifySuccess(text);
-        this.$emit("refreshEdit");
+        this.$emit("edit");
       });
     },
     menuMaintenanceText(mode) {

src/components/AlertsIcon.vue

@@ -58,24 +58,19 @@ export default {
     },
   },
   methods: {
-    getAlerts(showLoading = true) {
-      if (showLoading) this.$q.loading.show();
+    getAlerts() {
       this.$axios
         .patch("alerts/alerts/", { top: 10 })
         .then(r => {
           this.alertsCount = r.data.alerts_count;
           this.topAlerts = r.data.alerts;
-          this.$q.loading.hide();
         })
-        .catch(e => {
-          this.$q.loading.hide();
-        });
+        .catch(e => {});
     },
     showOverview() {
       this.$q
         .dialog({
           component: AlertsOverview,
-          parent: this,
         })
         .onDismiss(() => {
           this.getAlerts();
@@ -144,15 +139,15 @@ export default {
     },
     pollAlerts() {
       setInterval(() => {
-        this.getAlerts(false);
+        this.getAlerts();
       }, 60 * 1 * 1000);
     },
   },
   mounted() {
-    this.getAlerts(false);
+    this.getAlerts();
     this.pollAlerts();
   },
-  beforeDestroy() {
+  beforeUnmount() {
     clearInterval(this.poll);
   },
 };

src/components/AlertsManager.vue

@@ -6,7 +6,7 @@
           <q-btn ref="refresh" @click="refresh" class="q-mr-sm" dense flat push icon="refresh" />Alerts Manager
           <q-space />
           <q-btn dense flat icon="close" v-close-popup>
-            <q-tooltip content-class="bg-white text-primary">Close</q-tooltip>
+            <q-tooltip class="bg-white text-primary">Close</q-tooltip>
           </q-btn>
         </q-bar>
         <div class="q-pa-sm" style="min-height: 65vh; max-height: 65vh">
@@ -15,9 +15,9 @@
           </div>
           <q-table
             dense
-            :data="templates"
+            :rows="templates"
             :columns="columns"
-            :pagination.sync="pagination"
+            :v-model:pagination="pagination"
             row-key="id"
             binary-state-sort
             hide-pagination
@@ -169,6 +169,7 @@ import AlertTemplateRelated from "@/components/modals/alerts/AlertTemplateRelate
 export default {
   name: "AlertsManager",
   mixins: [mixins],
+  emits: ["hide", "ok", "cancel"],
   data() {
     return {
       selectedTemplate: null,
@@ -256,8 +257,9 @@ export default {
       this.$q
         .dialog({
           component: AlertTemplateForm,
-          parent: this,
-          alertTemplate: template,
+          componentProps: {
+            alertTemplate: template,
+          },
         })
         .onOk(() => {
           this.refresh();
@@ -268,7 +270,6 @@ export default {
       this.$q
         .dialog({
           component: AlertTemplateForm,
-          parent: this,
         })
         .onOk(() => {
           this.refresh();
@@ -278,8 +279,9 @@ export default {
       this.$q
         .dialog({
           component: AlertExclusions,
-          parent: this,
-          template: template,
+          componentProps: {
+            template: template,
+          },
         })
         .onOk(() => {
           this.refresh();
@@ -288,8 +290,9 @@ export default {
     showTemplateApplied(template) {
       this.$q.dialog({
         component: AlertTemplateRelated,
-        parent: this,
-        template: template,
+        componentProps: {
+          template: template,
+        },
       });
     },
     toggleEnabled(template) {

src/components/AuditManager.vue

@@ -5,7 +5,7 @@
       <q-space />Audit Manager
       <q-space />
       <q-btn dense flat icon="close" v-close-popup>
-        <q-tooltip content-class="bg-white text-primary">Close</q-tooltip>
+        <q-tooltip class="bg-white text-primary">Close</q-tooltip>
       </q-btn>
     </q-bar>
     <div class="text-h6 q-pl-sm q-pt-sm">Filter</div>
@@ -125,10 +125,10 @@
         class="audit-mgr-tbl-sticky"
         binary-state-sort
         title="Audit Logs"
-        :data="auditLogs"
+        :rows="auditLogs"
         :columns="columns"
         row-key="id"
-        :pagination.sync="pagination"
+        :v-model:pagination="pagination"
         :rows-per-page-options="[25, 50, 100, 500, 1000]"
         :no-data-label="noDataText"
         @row-click="showDetails"

src/components/AutomatedTasksTab.vue

@@ -21,11 +21,11 @@
           :table-class="{ 'table-bgcolor': !$q.dark.isActive, 'table-bgcolor-dark': $q.dark.isActive }"
           class="tabs-tbl-sticky"
           :style="{ 'max-height': tabsTableHeight }"
-          :data="tasks"
+          :rows="tasks"
           :columns="columns"
           :row-key="row => row.id"
           binary-state-sort
-          :pagination.sync="pagination"
+          :v-model:pagination="pagination"
           hide-bottom
         >
           <!-- header slots -->
@@ -72,7 +72,7 @@
             <q-th auto-width :props="props"></q-th>
           </template>
           <!-- body slots -->
-          <template slot="body" slot-scope="props" :props="props">
+          <template v-slot:body="props">
             <q-tr @contextmenu="editTaskPk = props.row.id">
               <!-- context menu -->
               <q-menu context-menu>
@@ -354,16 +354,18 @@ export default {
     showScriptOutput(script) {
       this.$q.dialog({
         component: ScriptOutput,
-        parent: this,
-        scriptInfo: script,
+        componentProps: {
+          scriptInfo: script,
+        },
       });
     },
     showEditTask(task) {
       this.$q
         .dialog({
           component: EditAutomatedTask,
-          parent: this,
-          task: task,
+          componentProps: {
+            task: task,
+          },
         })
         .onOk(() => {
           this.refreshTasks(this.automatedTasks.pk);

src/components/ChecksTab.vue

@@ -60,11 +60,11 @@
           :table-class="{ 'table-bgcolor': !$q.dark.isActive, 'table-bgcolor-dark': $q.dark.isActive }"
           class="tabs-tbl-sticky"
           :style="{ 'max-height': tabsTableHeight }"
-          :data="checks"
+          :rows="checks"
           :columns="columns"
           :row-key="row => row.id + row.check_type"
           binary-state-sort
-          :pagination.sync="pagination"
+          :v-model:pagination="pagination"
           hide-bottom
         >
           <!-- header slots -->
@@ -96,7 +96,7 @@
             <q-th auto-width :props="props"></q-th>
           </template>
           <!-- body slots -->
-          <template slot="body" slot-scope="props" :props="props">
+          <template v-slot:body="props">
             <q-tr @contextmenu="checkpk = props.row.id">
               <!-- context menu -->
               <q-menu context-menu>
@@ -326,6 +326,7 @@ import CheckGraph from "@/components/graphs/CheckGraph";
 
 export default {
   name: "ChecksTab",
+  emits: ["edit"],
   components: {
     DiskSpaceCheck,
     MemCheck,
@@ -452,14 +453,14 @@ export default {
       this.$axios
         .patch(`/checks/${check}/check/`, data)
         .then(r => {
-          this.$emit("refreshEdit");
+          this.$emit("edit");
           this.$store.dispatch("loadChecks", this.selectedAgentPk);
           this.notifySuccess("The check was reset");
         })
         .catch(e => {});
     },
     onRefresh(id) {
-      this.$emit("refreshEdit");
+      this.$emit("edit");
       this.$store.dispatch("loadChecks", id);
       this.$store.dispatch("loadAutomatedTasks", id);
     },
@@ -498,15 +499,17 @@ export default {
     showCheckGraphModal(check) {
       this.$q.dialog({
         component: CheckGraph,
-        parent: this,
-        check: check,
+        componentProps: {
+          check: check,
+        },
       });
     },
     showScriptOutput(script) {
       this.$q.dialog({
         component: ScriptOutput,
-        parent: this,
-        scriptInfo: script,
+        componentProps: {
+          scriptInfo: script,
+        },
       });
     },
   },

src/components/ClientsManager.vue

@@ -6,7 +6,7 @@
           <q-btn @click="getClients" class="q-mr-sm" dense flat push icon="refresh" />Clients Manager
           <q-space />
           <q-btn dense flat icon="close" v-close-popup>
-            <q-tooltip content-class="bg-white text-primary">Close</q-tooltip>
+            <q-tooltip class="bg-white text-primary">Close</q-tooltip>
           </q-btn>
         </q-bar>
         <div class="q-pa-sm" style="min-height: 65vh; max-height: 65vh">
@@ -15,9 +15,9 @@
           </div>
           <q-table
             dense
-            :data="clients"
+            :rows="clients"
             :columns="columns"
-            :pagination.sync="pagination"
+            :v-model:pagination="pagination"
             row-key="id"
             binary-state-sort
             hide-pagination
@@ -92,6 +92,7 @@ import SitesTable from "@/components/modals/clients/SitesTable";
 
 export default {
   name: "ClientsManager",
+  emits: ["hide", "ok", "cancel"],
   mixins: [mixins],
   data() {
     return {
@@ -124,9 +125,10 @@ export default {
       this.$q
         .dialog({
           component: DeleteClient,
-          parent: this,
-          object: client,
-          type: "client",
+          componentProps: {
+            object: client,
+            type: "client",
+          },
         })
         .onOk(() => {
           this.getClients();
@@ -136,8 +138,9 @@ export default {
       this.$q
         .dialog({
           component: ClientsForm,
-          parent: this,
-          client: client,
+          componentProps: {
+            client: client,
+          },
         })
         .onOk(() => {
           this.getClients();
@@ -147,7 +150,6 @@ export default {
       this.$q
         .dialog({
           component: ClientsForm,
-          parent: this,
         })
         .onOk(() => {
           this.getClients();
@@ -157,8 +159,9 @@ export default {
       this.$q
         .dialog({
           component: SitesForm,
-          parent: this,
-          client: client.id,
+          componentProps: {
+            client: client.id,
+          },
         })
         .onOk(() => {
           this.getClients();
@@ -167,8 +170,9 @@ export default {
     showSitesTable(client) {
       this.$q.dialog({
         component: SitesTable,
-        parent: this,
-        client: client,
+        componentProps: {
+          client: client,
+        },
       });
     },
     show() {

src/components/CustomField.vue

@@ -8,8 +8,8 @@
     :label="field.name"
     :type="field.type === 'text' ? 'text' : 'number'"
     :hint="hintText(field)"
-    :value="value"
-    @input="value => $emit('input', value)"
+    :model-value="model_value"
+    @update:model-value="value => $emit('update:model-value', value)"
     :rules="[...validationRules]"
     reactive-rules
     autogrow
@@ -20,8 +20,8 @@
     ref="input"
     :label="field.name"
     :hint="hintText(field)"
-    :value="value"
-    @input="value => $emit('input', value)"
+    :model-value="model_value"
+    @update:model-value="value => $emit('update:model-value', value)"
   />
 
   <q-input
@@ -31,15 +31,19 @@
     :hint="hintText(field)"
     outlined
     dense
-    :value="value"
-    @input="value => $emit('input', value)"
+    :model-value="model_value"
+    @update:model-value="value => $emit('update:model-value', value)"
     :rules="[...validationRules]"
     reactive-rules
   >
     <template v-slot:append>
       <q-icon name="event" class="cursor-pointer">
         <q-popup-proxy transition-show="scale" transition-hide="scale">
-          <q-date :value="value" @input="value => $emit('input', value)" mask="YYYY-MM-DD HH:mm">
+          <q-date
+            :model-value="model_value"
+            @update:model-value="value => $emit('update:model-value', value)"
+            mask="YYYY-MM-DD HH:mm"
+          >
             <div class="row items-center justify-end">
               <q-btn v-close-popup label="Close" color="primary" flat />
             </div>
@@ -48,7 +52,11 @@
       </q-icon>
       <q-icon name="access_time" class="cursor-pointer">
         <q-popup-proxy transition-show="scale" transition-hide="scale">
-          <q-time :value="value" @input="value => $emit('input', value)" mask="YYYY-MM-DD HH:mm">
+          <q-time
+            :model-value="model_value"
+            @update:model-value="value => $emit('update:model-value', value)"
+            mask="YYYY-MM-DD HH:mm"
+          >
             <div class="row items-center justify-end">
               <q-btn v-close-popup label="Close" color="primary" flat />
             </div>
@@ -61,8 +69,8 @@
   <q-select
     v-else-if="field.type === 'single' || field.type === 'multiple'"
     ref="input"
-    :value="value"
-    @input="value => $emit('input', value)"
+    :model-value="model_value"
+    @update:model-value="value => $emit('update:model-value', value)"
     outlined
     dense
     :hint="hintText(field)"
@@ -78,7 +86,7 @@
 <script>
 export default {
   name: "CustomField",
-  props: ["field", "value"],
+  props: ["field", "model-value"],
   methods: {
     validate(...args) {
       return this.$refs.input.validate(...args);
@@ -97,6 +105,9 @@ export default {
     },
   },
   computed: {
+    model_value() {
+      return this["model-value"];
+    },
     validationRules() {
       const rules = [];
 

src/components/Deployment.vue

@@ -5,7 +5,7 @@
       <q-space />Manage Deployments
       <q-space />
       <q-btn dense flat icon="close" v-close-popup>
-        <q-tooltip content-class="bg-white text-primary" />
+        <q-tooltip class="bg-white text-primary" />
       </q-btn>
     </q-bar>
     <div class="row">
@@ -21,14 +21,14 @@
         class="audit-mgr-tbl-sticky"
         binary-state-sort
         virtual-scroll
-        :data="deployments"
+        :rows="deployments"
         :columns="columns"
         :visible-columns="visibleColumns"
         row-key="id"
-        :pagination.sync="pagination"
+        :v-model:pagination="pagination"
         no-data-label="No Deployments"
       >
-        <template slot="body" slot-scope="props" :props="props">
+        <template v-slot:body="props">
           <q-tr>
             <q-td key="client" :props="props">{{ props.row.client_name }}</q-td>
             <q-td key="site" :props="props">{{ props.row.site_name }}</q-td>
@@ -40,7 +40,7 @@
             <q-td key="created" :props="props">{{ props.row.created }}</q-td>
             <q-td key="flags" :props="props"
               ><q-badge color="grey-8" label="View Flags" />
-              <q-tooltip content-style="font-size: 12px">{{ props.row.install_flags }}</q-tooltip>
+              <q-tooltip style="font-size: 12px">{{ props.row.install_flags }}</q-tooltip>
             </q-td>
             <q-td key="link" :props="props"
               ><q-btn size="sm" color="primary" icon="content_copy" label="Copy" @click="copyLink(props)"
@@ -53,7 +53,7 @@
       </q-table>
     </q-card-section>
     <q-dialog v-model="showNewDeployment">
-      <NewDeployment @close="showNewDeployment = false" @added="getDeployments" />
+      <NewDeployment @close="showNewDeployment = false" @add="getDeployments" />
     </q-dialog>
   </q-card>
 </template>

src/components/EventLog.vue

@@ -21,9 +21,9 @@
       dense
       :table-class="{ 'table-bgcolor': !$q.dark.isActive, 'table-bgcolor-dark': $q.dark.isActive }"
       class="remote-bg-tbl-sticky"
-      :data="events"
+      :rows="events"
       :columns="columns"
-      :pagination.sync="pagination"
+      :v-model:pagination="pagination"
       :filter="filter"
       row-key="uid"
       binary-state-sort
@@ -43,7 +43,7 @@
           </template>
         </q-input>
       </template>
-      <template slot="body" slot-scope="props" :props="props">
+      <template v-slot:body="props">
         <q-tr :props="props">
           <q-td>{{ props.row.eventType }}</q-td>
           <q-td>{{ props.row.source }}</q-td>

src/components/FileBar.vue

@@ -175,7 +175,7 @@
       <!-- Update Agents Modal -->
       <div class="q-pa-md q-gutter-sm">
         <q-dialog v-model="showUpdateAgentsModal" maximized transition-show="slide-up" transition-hide="slide-down">
-          <UpdateAgents @close="showUpdateAgentsModal = false" @edited="edited" />
+          <UpdateAgents @close="showUpdateAgentsModal = false" @edit="edited" />
         </q-dialog>
       </div>
       <!-- Script Manager -->
@@ -237,6 +237,7 @@ import PermissionsManager from "@/components/PermissionsManager";
 
 export default {
   name: "FileBar",
+  emits: ["edit"],
   components: {
     LogModal,
     PendingActions,
@@ -306,41 +307,35 @@ export default {
     showAutomationManager() {
       this.$q.dialog({
         component: AutomationManager,
-        parent: this,
       });
     },
     showAlertsManager() {
       this.$q.dialog({
         component: AlertsManager,
-        parent: this,
       });
     },
     showClientsManager() {
       this.$q.dialog({
         component: ClientsManager,
-        parent: this,
       });
     },
     showAddClientModal() {
       this.$q.dialog({
         component: ClientsForm,
-        parent: this,
       });
     },
     showAddSiteModal() {
       this.$q.dialog({
         component: SitesForm,
-        parent: this,
       });
     },
     showPermissionsManager() {
       this.$q.dialog({
         component: PermissionsManager,
-        parent: this,
       });
     },
     edited() {
-      this.$emit("edited");
+      this.$emit("edit");
     },
   },
 };

src/components/NotesTab.vue

@@ -12,10 +12,10 @@
         grid
         class="tabs-tbl-sticky"
         :style="{ 'max-height': tabsTableHeight }"
-        :data="notes"
+        :rows="notes"
         :columns="columns"
         :visible-columns="visibleColumns"
-        :pagination.sync="pagination"
+        :v-model:pagination="pagination"
         row-key="id"
         :rows-per-page-options="[0]"
         hide-bottom

src/components/PermissionsManager.vue

@@ -20,14 +20,14 @@
           class="audit-mgr-tbl-sticky"
           binary-state-sort
           virtual-scroll
-          :data="roles"
+          :rows="roles"
           :columns="columns"
           :visible-columns="visibleColumns"
           row-key="id"
-          :pagination.sync="pagination"
+          :v-model:pagination="pagination"
           no-data-label="No Roles"
         >
-          <template slot="body" slot-scope="props" :props="props">
+          <template v-slot:body="props">
             <q-tr>
               <q-td key="name" :props="props">{{ props.row.name }}</q-td>
               <q-td class="q-pa-md q-gutter-sm" key="actions" :props="props"
@@ -53,6 +53,7 @@ import RolesForm from "@/components/modals/admin/RolesForm";
 
 export default {
   name: "PermissionsManager",
+  emits: ["hide", "ok", "cancel"],
   mixins: [mixins],
   components: { RolesForm },
   data() {

src/components/ProcessManager.vue

@@ -4,9 +4,9 @@
       dense
       :table-class="{ 'table-bgcolor': !$q.dark.isActive, 'table-bgcolor-dark': $q.dark.isActive }"
       class="remote-bg-tbl-sticky"
-      :data="procs"
+      :rows="procs"
       :columns="columns"
-      :pagination.sync="pagination"
+      :v-model:pagination="pagination"
       :filter="filter"
       row-key="id"
       binary-state-sort
@@ -41,7 +41,7 @@
           </template>
         </q-input>
       </template>
-      <template slot="body" slot-scope="props" :props="props">
+      <template v-slot:body="props">
         <q-tr :props="props">
           <q-menu context-menu>
             <q-list dense style="min-width: 200px">
@@ -204,7 +204,7 @@ export default {
       return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
     },
   },
-  beforeDestroy() {
+  beforeUnmount() {
     clearInterval(this.polling);
   },
   created() {

src/components/ScriptManager.vue

@@ -5,7 +5,7 @@
         <q-btn @click="getScripts" class="q-mr-sm" dense flat push icon="refresh" />Script Manager
         <q-space />
         <q-btn dense flat icon="close" v-close-popup>
-          <q-tooltip content-class="bg-white text-primary">Close</q-tooltip>
+          <q-tooltip class="bg-white text-primary">Close</q-tooltip>
         </q-btn>
       </q-bar>
       <div class="q-pa-md">
@@ -94,9 +94,9 @@
             :filter="search"
             no-connectors
             node-key="id"
-            :expanded.sync="expanded"
+            :v-model:expanded="expanded"
             @update:selected="nodeSelected"
-            :selected.sync="selected"
+            :v-model:selected="selected"
             no-results-label="No Scripts Found"
             no-nodes-label="No Scripts Found"
           >
@@ -183,10 +183,10 @@
             dense
             :table-class="{ 'table-bgcolor': !$q.dark.isActive, 'table-bgcolor-dark': $q.dark.isActive }"
             class="settings-tbl-sticky"
-            :data="visibleScripts"
+            :rows="visibleScripts"
             :columns="columns"
             :visible-columns="visibleColumns"
-            :pagination.sync="pagination"
+            :v-model:pagination="pagination"
             :filter="search"
             row-key="id"
             binary-state-sort
@@ -205,7 +205,7 @@
             </template>
 
             <template v-slot:no-data> No Scripts Found </template>
-            <template slot="body" slot-scope="props" :props="props">
+            <template v-slot:body="props">
               <!-- Table View -->
               <q-tr
                 :class="`${rowSelectedClass(props.row.id)} cursor-pointer`"
@@ -289,7 +289,7 @@
                 <q-td>
                   <span v-if="props.row.args.length > 0">
                     {{ truncateText(props.row.args.toString()) }}
-                    <q-tooltip v-if="props.row.args.toString().length >= 60" content-style="font-size: 12px">
+                    <q-tooltip v-if="props.row.args.toString().length >= 60" style="font-size: 12px">
                       {{ props.row.args }}
                     </q-tooltip>
                   </span>
@@ -298,7 +298,7 @@
                 <q-td>{{ props.row.category }}</q-td>
                 <q-td>
                   {{ truncateText(props.row.description) }}
-                  <q-tooltip v-if="props.row.description.length >= 60" content-style="font-size: 12px">{{
+                  <q-tooltip v-if="props.row.description.length >= 60" style="font-size: 12px">{{
                     props.row.description
                   }}</q-tooltip>
                 </q-td>
@@ -314,7 +314,7 @@
         :script="selectedScript"
         :categories="categories"
         @close="showScriptUploadModal = false"
-        @added="getScripts"
+        @add="getScripts"
       />
     </q-dialog>
   </div>
@@ -417,9 +417,10 @@ export default {
     viewCode(script) {
       this.$q.dialog({
         component: ScriptFormModal,
-        parent: this,
-        script: script,
-        readonly: true,
+        componentProps: {
+          script: script,
+          readonly: true,
+        },
       });
     },
     favoriteScript(script) {
@@ -482,9 +483,10 @@ export default {
       this.$q
         .dialog({
           component: ScriptFormModal,
-          parent: this,
-          categories: this.categories,
-          readonly: false,
+          componentProps: {
+            categories: this.categories,
+            readonly: false,
+          },
         })
         .onOk(() => {
           this.getScripts();
@@ -494,10 +496,11 @@ export default {
       this.$q
         .dialog({
           component: ScriptFormModal,
-          parent: this,
-          script: script,
-          categories: this.categories,
-          readonly: false,
+          componentProps: {
+            script: script,
+            categories: this.categories,
+            readonly: false,
+          },
         })
         .onOk(() => {
           this.getScripts();

src/components/Services.vue

@@ -4,9 +4,9 @@
       dense
       :table-class="{ 'table-bgcolor': !$q.dark.isActive, 'table-bgcolor-dark': $q.dark.isActive }"
       class="remote-bg-tbl-sticky"
-      :data="servicesData"
+      :rows="servicesData"
       :columns="columns"
-      :pagination.sync="pagination"
+      :v-model:pagination="pagination"
       :filter="filter"
       row-key="display_name"
       binary-state-sort
@@ -21,7 +21,7 @@
           </template>
         </q-input>
       </template>
-      <template slot="body" slot-scope="props" :props="props">
+      <template v-slot:body="props">
         <q-tr :props="props">
           <q-menu context-menu>
             <q-list dense style="min-width: 200px">

src/components/SoftwareTab.vue

@@ -24,10 +24,10 @@
       class="tabs-tbl-sticky"
       :style="{ 'max-height': tabsTableHeight }"
       dense
-      :data="software"
+      :rows="software"
       :columns="columns"
       :filter="filter"
-      :pagination.sync="pagination"
+      :v-model:pagination="pagination"
       binary-state-sort
       hide-bottom
       row-key="id"

src/components/SubTableTabs.vue

@@ -25,7 +25,7 @@
         <SummaryTab />
       </q-tab-panel>
       <q-tab-panel name="checks" class="q-pb-xs q-pt-none">
-        <ChecksTab @refreshEdit="$emit('refreshEdit')" />
+        <ChecksTab @edit="$emit('edit')" />
       </q-tab-panel>
       <q-tab-panel name="tasks" class="q-pb-xs q-pt-none">
         <AutomatedTasksTab />
@@ -56,6 +56,7 @@ import AssetsTab from "@/components/AssetsTab";
 import NotesTab from "@/components/NotesTab";
 export default {
   name: "SubTableTabs",
+  emits: ["edit"],
   components: {
     SummaryTab,
     ChecksTab,

src/components/WindowsUpdates.vue

@@ -2,7 +2,7 @@
   <div v-if="!selectedAgentPk">No agent selected</div>
   <div v-else-if="Object.keys(sortedUpdates).length === 0">No Patches</div>
   <div v-else class="q-pa-xs">
-    <q-btn dense flat push @click="refreshUpdates(updates.pk)" icon="refresh" class="q-mr-sm"/>
+    <q-btn dense flat push @click="refreshUpdates(updates.pk)" icon="refresh" class="q-mr-sm" />
     <span v-if="summary.patches_last_installed" class="text-bold">
       Patches last installed: {{ summary.patches_last_installed }}
     </span>
@@ -12,10 +12,10 @@
       :table-class="{ 'table-bgcolor': !$q.dark.isActive, 'table-bgcolor-dark': $q.dark.isActive }"
       class="tabs-tbl-sticky"
       :style="{ 'max-height': tabsTableHeight }"
-      :data="sortedUpdates"
+      :rows="sortedUpdates"
       :columns="columns"
       :visible-columns="visibleColumns"
-      :pagination.sync="pagination"
+      :v-model:pagination="pagination"
       :filter="filter"
       row-key="id"
       binary-state-sort
@@ -23,7 +23,7 @@
       virtual-scroll
       :rows-per-page-options="[0]"
     >
-      <template slot="body" slot-scope="props" :props="props">
+      <template v-slot:body="props">
         <q-tr :props="props">
           <q-menu context-menu>
             <q-list dense style="min-width: 100px">

src/components/automation/AutomationManager.vue

@@ -6,7 +6,7 @@
           <q-btn ref="refresh" @click="refresh" class="q-mr-sm" dense flat push icon="refresh" />Automation Manager
           <q-space />
           <q-btn dense flat icon="close" v-close-popup>
-            <q-tooltip content-class="bg-white text-primary">Close</q-tooltip>
+            <q-tooltip class="bg-white text-primary">Close</q-tooltip>
           </q-btn>
         </q-bar>
         <q-card-section>
@@ -27,9 +27,9 @@
             <q-table
               :table-class="{ 'table-bgcolor': !$q.dark.isActive, 'table-bgcolor-dark': $q.dark.isActive }"
               class="tabs-tbl-sticky"
-              :data="policies"
+              :rows="policies"
               :columns="columns"
-              :pagination.sync="pagination"
+              :v-model:pagination="pagination"
               :rows-per-page-options="[0]"
               dense
               row-key="id"
@@ -248,6 +248,7 @@ import PolicyAutomatedTasksTab from "@/components/automation/PolicyAutomatedTask
 
 export default {
   name: "AutomationManager",
+  emits: ["hide", "ok", "cancel"],
   components: { PolicyChecksTab, PolicyAutomatedTasksTab },
   mixins: [mixins],
   data() {
@@ -353,21 +354,20 @@ export default {
     showRelations(policy) {
       this.$q.dialog({
         component: RelationsView,
-        parent: this,
-        policy: policy,
+        componentProps: {
+          policy: policy,
+        },
       });
     },
     showPolicyOverview() {
       this.$q.dialog({
         component: PolicyOverview,
-        parent: this,
       });
     },
     showAddPolicyForm(policy = undefined) {
       this.$q
         .dialog({
           component: PolicyForm,
-          parent: this,
         })
         .onOk(() => {
           this.refresh();
@@ -377,8 +377,9 @@ export default {
       this.$q
         .dialog({
           component: PolicyForm,
-          parent: this,
-          copyPolicy: policy,
+          componentProps: {
+            copyPolicy: policy,
+          },
         })
         .onOk(() => {
           this.refresh();
@@ -388,8 +389,9 @@ export default {
       this.$q
         .dialog({
           component: PolicyForm,
-          parent: this,
-          policy: policy,
+          componentProps: {
+            policy: policy,
+          },
         })
         .onOk(() => {
           this.refresh();
@@ -399,9 +401,10 @@ export default {
       this.$q
         .dialog({
           component: AlertTemplateAdd,
-          parent: this,
-          type: "policy",
-          object: policy,
+          componentProps: {
+            type: "policy",
+            object: policy,
+          },
         })
         .onOk(() => {
           this.refresh();
@@ -411,11 +414,12 @@ export default {
       this.$q
         .dialog({
           component: DialogWrapper,
-          parent: this,
-          title: policy.winupdatepolicy.length > 0 ? "Edit Patch Policy" : "Add Patch Policy",
-          vuecomponent: PatchPolicyForm,
           componentProps: {
-            policy: policy,
+            title: policy.winupdatepolicy.length > 0 ? "Edit Patch Policy" : "Add Patch Policy",
+            vuecomponent: PatchPolicyForm,
+            componentProps: {
+              policy: policy,
+            },
           },
         })
         .onOk(() => {
@@ -426,8 +430,9 @@ export default {
       this.$q
         .dialog({
           component: PolicyExclusions,
-          parent: this,
-          policy: policy,
+          componentProps: {
+            policy: policy,
+          },
         })
         .onOk(() => {
           this.refresh();

src/components/automation/PolicyAutomatedTasksTab.vue

@@ -15,10 +15,10 @@
         <q-table
           :table-class="{ 'table-bgcolor': !$q.dark.isActive, 'table-bgcolor-dark': $q.dark.isActive }"
           class="tabs-tbl-sticky"
-          :data="tasks"
+          :rows="tasks"
           :columns="columns"
           :rows-per-page-options="[0]"
-          :pagination.sync="pagination"
+          :v-model:pagination="pagination"
           dense
           row-key="id"
           binary-state-sort
@@ -290,8 +290,9 @@ export default {
       this.$q
         .dialog({
           component: EditAutomatedTask,
-          parent: this,
-          task: task,
+          componentProps: {
+            task: task,
+          },
         })
         .onOk(() => {
           this.getTasks();
@@ -300,9 +301,10 @@ export default {
     showStatus(task) {
       this.$q.dialog({
         component: PolicyStatus,
-        parent: this,
-        type: "task",
-        item: task,
+        componentProps: {
+          type: "task",
+          item: task,
+        },
       });
     },
     runTask(pk, enabled) {

src/components/automation/PolicyChecksTab.vue

@@ -54,9 +54,9 @@
         <q-table
           :table-class="{ 'table-bgcolor': !$q.dark.isActive, 'table-bgcolor-dark': $q.dark.isActive }"
           class="tabs-tbl-sticky"
-          :data="checks"
+          :rows="checks"
           :columns="columns"
-          :pagination.sync="pagination"
+          :v-model:pagination="pagination"
           :rows-per-page-options="[0]"
           row-key="id"
           binary-state-sort
@@ -344,9 +344,10 @@ export default {
     showPolicyStatus(check) {
       this.$q.dialog({
         component: PolicyStatus,
-        parent: this,
-        type: "check",
-        item: check,
+        componentProps: {
+          type: "check",
+          item: check,
+        },
       });
     },
   },

src/components/automation/PolicyOverview.vue

@@ -5,7 +5,7 @@
         <q-btn @click="getPolicyTree" class="q-mr-sm" dense flat push icon="refresh" />Policy Overview
         <q-space />
         <q-btn dense flat icon="close" v-close-popup>
-          <q-tooltip content-class="bg-white text-primary">Close</q-tooltip>
+          <q-tooltip class="bg-white text-primary">Close</q-tooltip>
         </q-btn>
       </q-bar>
       <q-splitter v-model="splitterModel" style="height: 600px">
@@ -16,7 +16,7 @@
               :nodes="clientSiteTree"
               node-key="key"
               selected-color="primary"
-              :selected.sync="selectedPolicyId"
+              :v-model:selected="selectedPolicyId"
             ></q-tree>
           </div>
         </template>
@@ -63,6 +63,7 @@ import PolicyAutomatedTasksTab from "@/components/automation/PolicyAutomatedTask
 
 export default {
   name: "PolicyOverview",
+  emits: ["hide", "ok", "cancel"],
   components: {
     PolicyAutomatedTasksTab,
     PolicyChecksTab,

src/components/automation/modals/PolicyAdd.vue

@@ -5,7 +5,7 @@
         Edit policies assigned to {{ type }}
         <q-space />
         <q-btn dense flat icon="close" v-close-popup>
-          <q-tooltip content-class="bg-white text-primary">Close</q-tooltip>
+          <q-tooltip class="bg-white text-primary">Close</q-tooltip>
         </q-btn>
       </q-bar>
       <q-form @submit="submit">
@@ -72,6 +72,7 @@ import mixins from "@/mixins/mixins";
 
 export default {
   name: "PolicyAdd",
+  emits: ["hide", "ok", "cancel"],
   props: {
     object: !Object,
     type: {

src/components/automation/modals/PolicyExclusions.vue

@@ -5,7 +5,7 @@
         Policy Exclusions for {{ policy.name }}
         <q-space />
         <q-btn dense flat icon="close" v-close-popup>
-          <q-tooltip content-class="bg-white text-primary">Close</q-tooltip>
+          <q-tooltip class="bg-white text-primary">Close</q-tooltip>
         </q-btn>
       </q-bar>
       <q-form ref="form" @submit.prevent="onSubmit">
@@ -37,7 +37,12 @@
             emit-value
           >
             <template v-slot:option="scope">
-              <q-item v-if="!scope.opt.category" v-bind="scope.itemProps" v-on="scope.itemEvents" class="q-pl-lg">
+              <q-item
+                v-if="!scope.opt.category"
+                v-bind="scope.itemProps"
+                v-on="scope.itemProps.itemEvents"
+                class="q-pl-lg"
+              >
                 <q-item-section>
                   <q-item-label v-html="scope.opt.label"></q-item-label>
                 </q-item-section>
@@ -87,6 +92,7 @@
 import mixins from "@/mixins/mixins";
 export default {
   name: "PolicyExclusions",
+  emits: ["hide", "ok", "cancel"],
   props: { policy: !Object },
   mixins: [mixins],
   data() {

src/components/automation/modals/PolicyForm.vue

@@ -5,7 +5,7 @@
         {{ title }}
         <q-space />
         <q-btn dense flat icon="close" v-close-popup>
-          <q-tooltip content-class="bg-white text-primary">Close</q-tooltip>
+          <q-tooltip class="bg-white text-primary">Close</q-tooltip>
         </q-btn>
       </q-bar>
       <q-form @submit="submit">
@@ -53,6 +53,7 @@ import mixins from "@/mixins/mixins";
 
 export default {
   name: "PolicyForm",
+  emits: ["hide", "ok", "cancel"],
   mixins: [mixins],
   props: { policy: Object, copyPolicy: Object },
   data() {

src/components/automation/modals/PolicyStatus.vue

@@ -5,7 +5,7 @@
         {{ title.slice(0, 27) }}
         <q-space />
         <q-btn dense flat icon="close" v-close-popup>
-          <q-tooltip content-class="bg-white text-primary">Close</q-tooltip>
+          <q-tooltip class="bg-white text-primary">Close</q-tooltip>
         </q-btn>
       </q-bar>
       <q-card-section>
@@ -13,9 +13,9 @@
           style="max-height: 35vh"
           :table-class="{ 'table-bgcolor': !$q.dark.isActive, 'table-bgcolor-dark': $q.dark.isActive }"
           class="tabs-tbl-sticky"
-          :data="data"
+          :rows="data"
           :columns="columns"
-          :pagination.sync="pagination"
+          :v-model:pagination="pagination"
           :rows-per-page-options="[0]"
           :visibleColumns="visibleColumns"
           row-key="id"
@@ -118,6 +118,7 @@ import EventLogCheckOutput from "@/components/modals/checks/EventLogCheckOutput"
 
 export default {
   name: "PolicyStatus",
+  emits: ["hide", "ok", "cancel"],
   components: {
     EventLogCheckOutput,
   },
@@ -226,8 +227,9 @@ export default {
     showScriptOutput(script) {
       this.$q.dialog({
         component: ScriptOutput,
-        parent: this,
-        scriptInfo: script,
+        componentProps: {
+          scriptInfo: script,
+        },
       });
     },
     show() {

src/components/automation/modals/RelationsView.vue

@@ -5,7 +5,7 @@
         {{ policy.name }} Relations
         <q-space />
         <q-btn dense flat icon="close" v-close-popup>
-          <q-tooltip content-class="bg-white text-primary">Close</q-tooltip>
+          <q-tooltip class="bg-white text-primary">Close</q-tooltip>
         </q-btn>
       </q-bar>
       <q-card-section
@@ -114,6 +114,7 @@
 <script>
 export default {
   name: "RelationsView",
+  emits: ["hide", "ok", "cancel"],
   props: {
     policy: {
       type: Object,

src/components/graphs/CheckGraph.vue

@@ -6,7 +6,7 @@
         {{ title }}
         <q-space />
         <q-btn dense flat icon="close" v-close-popup>
-          <q-tooltip content-class="bg-white text-primary">Close</q-tooltip>
+          <q-tooltip class="bg-white text-primary">Close</q-tooltip>
         </q-btn>
       </q-bar>
       <div class="row">
@@ -36,10 +36,11 @@
   </q-dialog>
 </template>
 <script>
-import VueApexCharts from "vue-apexcharts";
+import VueApexCharts from "vue3-apexcharts";
 
 export default {
   name: "CheckGraph",
+  emits: ["hide", "ok", "cancel"],
   components: {
     apexchart: VueApexCharts,
   },

src/components/modals/admin/RolesForm.vue

@@ -157,6 +157,7 @@ import mixins from "@/mixins/mixins";
 
 export default {
   name: "RolesForm",
+  emits: ["close"],
   mixins: [mixins],
   props: { pk: Number },
   data() {

src/components/modals/admin/UserForm.vue

@@ -96,6 +96,7 @@ import mixins from "@/mixins/mixins";
 
 export default {
   name: "UserForm",
+  emits: ["close"],
   mixins: [mixins],
   props: { pk: Number },
   data() {

src/components/modals/admin/UserResetPasswordForm.vue

@@ -33,7 +33,8 @@
 import mixins from "@/mixins/mixins";
 
 export default {
-  name: "UserResetForm",
+  name: "UserResetPasswordForm",
+  emits: ["close"],
   mixins: [mixins],
   props: { pk: Number, username: String },
   data() {

src/components/modals/agents/AgentRecovery.vue

@@ -54,6 +54,7 @@ import mixins from "@/mixins/mixins";
 
 export default {
   name: "AgentRecovery",
+  emits: ["close"],
   mixins: [mixins],
   props: {
     pk: Number,

src/components/modals/agents/BulkAction.vue

@@ -95,7 +95,12 @@
           @input="setScriptDefaults"
         >
           <template v-slot:option="scope">
-            <q-item v-if="!scope.opt.category" v-bind="scope.itemProps" v-on="scope.itemEvents" class="q-pl-lg">
+            <q-item
+              v-if="!scope.opt.category"
+              v-bind="scope.itemProps"
+              v-on="scope.itemProps.itemEvents"
+              class="q-pl-lg"
+            >
               <q-item-section>
                 <q-item-label v-html="scope.opt.label"></q-item-label>
               </q-item-section>
@@ -177,6 +182,7 @@ import mixins from "@/mixins/mixins";
 
 export default {
   name: "BulkAction",
+  emits: ["close"],
   mixins: [mixins],
   props: {
     mode: !String,

src/components/modals/agents/EditAgent.vue

@@ -153,6 +153,7 @@ import CustomField from "@/components/CustomField";
 
 export default {
   name: "EditAgent",
+  emits: ["edit", "close"],
   components: { PatchPolicyForm, CustomField },
   mixins: [mixins],
   data() {
@@ -247,7 +248,7 @@ export default {
         })
         .then(r => {
           this.$emit("close");
-          this.$emit("edited");
+          this.$emit("edit");
           this.notifySuccess("Agent was edited!");
         })
         .catch(e => {});

src/components/modals/agents/PatchPolicyForm.vue

@@ -187,6 +187,7 @@ import mixins from "@/mixins/mixins";
 
 export default {
   name: "PatchPolicyForm",
+  emits: ["close", "hide"],
   props: {
     policy: Object,
     agent: Object,

src/components/modals/agents/RunScript.vue

@@ -20,7 +20,12 @@
           @input="setScriptDefaults"
         >
           <template v-slot:option="scope">
-            <q-item v-if="!scope.opt.category" v-bind="scope.itemProps" v-on="scope.itemEvents" class="q-pl-lg">
+            <q-item
+              v-if="!scope.opt.category"
+              v-bind="scope.itemProps"
+              v-on="scope.itemProps.itemEvents"
+              class="q-pl-lg"
+            >
               <q-item-section>
                 <q-item-label v-html="scope.opt.label"></q-item-label>
               </q-item-section>
@@ -104,6 +109,7 @@ import { mapState } from "vuex";
 
 export default {
   name: "RunScript",
+  emits: ["close"],
   mixins: [mixins],
   props: {
     pk: Number,

src/components/modals/agents/UpdateAgents.vue

@@ -4,7 +4,7 @@
       Update Agents
       <q-space />
       <q-btn dense flat icon="close" v-close-popup>
-        <q-tooltip content-class="bg-white text-primary">Close</q-tooltip>
+        <q-tooltip class="bg-white text-primary">Close</q-tooltip>
       </q-btn>
     </q-bar>
     <q-separator />
@@ -41,6 +41,7 @@
 import mixins from "@/mixins/mixins";
 export default {
   name: "UpdateAgents",
+  emits: ["close", "edit"],
   mixins: [mixins],
   data() {
     return {
@@ -75,7 +76,7 @@ export default {
         .post("/agents/updateagents/", data)
         .then(r => {
           this.$emit("close");
-          this.$emit("edited");
+          this.$emit("edit");
           this.notifySuccess("Agents will now be updated");
         })
         .catch(e => {});

src/components/modals/alerts/AlertExclusions.vue

@@ -5,7 +5,7 @@
         Alert Exclusions for {{ template.name }}
         <q-space />
         <q-btn dense flat icon="close" v-close-popup>
-          <q-tooltip content-class="bg-white text-primary">Close</q-tooltip>
+          <q-tooltip class="bg-white text-primary">Close</q-tooltip>
         </q-btn>
       </q-bar>
       <q-form ref="form" @submit.prevent="onSubmit">
@@ -37,7 +37,12 @@
             emit-value
           >
             <template v-slot:option="scope">
-              <q-item v-if="!scope.opt.category" v-bind="scope.itemProps" v-on="scope.itemEvents" class="q-pl-lg">
+              <q-item
+                v-if="!scope.opt.category"
+                v-bind="scope.itemProps"
+                v-on="scope.itemProps.itemEvents"
+                class="q-pl-lg"
+              >
                 <q-item-section>
                   <q-item-label v-html="scope.opt.label"></q-item-label>
                 </q-item-section>
@@ -92,6 +97,7 @@
 import mixins from "@/mixins/mixins";
 export default {
   name: "AlertExclusions",
+  emits: ["hide", "ok"],
   props: { template: !Object },
   mixins: [mixins],
   data() {

src/components/modals/alerts/AlertTemplateAdd.vue

@@ -5,7 +5,7 @@
         Edit Alert Template assigned to {{ type }}
         <q-space />
         <q-btn dense flat icon="close" v-close-popup>
-          <q-tooltip content-class="bg-white text-primary">Close</q-tooltip>
+          <q-tooltip class="bg-white text-primary">Close</q-tooltip>
         </q-btn>
       </q-bar>
       <q-form @submit.prevent="submit" ref="form">
@@ -37,6 +37,7 @@ import mixins from "@/mixins/mixins";
 
 export default {
   name: "AlertTemplateAdd",
+  emits: ["hide", "ok", "cancel"],
   props: {
     object: !Object,
     type: {

src/components/modals/alerts/AlertTemplateForm.vue

@@ -5,7 +5,7 @@
         {{ title }}
         <q-space />
         <q-btn dense flat icon="close" v-close-popup>
-          <q-tooltip content-class="bg-white text-primary">Close</q-tooltip>
+          <q-tooltip class="bg-white text-primary">Close</q-tooltip>
         </q-btn>
       </q-bar>
       <q-stepper v-model="step" ref="stepper" alternative-labels header-nav color="primary" animated>
@@ -119,7 +119,12 @@
                 @input="setScriptDefaults('failure')"
               >
                 <template v-slot:option="scope">
-                  <q-item v-if="!scope.opt.category" v-bind="scope.itemProps" v-on="scope.itemEvents" class="q-pl-lg">
+                  <q-item
+                    v-if="!scope.opt.category"
+                    v-bind="scope.itemProps"
+                    v-on="scope.itemProps.itemEvents"
+                    class="q-pl-lg"
+                  >
                     <q-item-section>
                       <q-item-label v-html="scope.opt.label"></q-item-label>
                     </q-item-section>
@@ -183,7 +188,12 @@
                 @input="setScriptDefaults('resolved')"
               >
                 <template v-slot:option="scope">
-                  <q-item v-if="!scope.opt.category" v-bind="scope.itemProps" v-on="scope.itemEvents" class="q-pl-lg">
+                  <q-item
+                    v-if="!scope.opt.category"
+                    v-bind="scope.itemProps"
+                    v-on="scope.itemProps.itemEvents"
+                    class="q-pl-lg"
+                  >
                     <q-item-section>
                       <q-item-label v-html="scope.opt.label"></q-item-label>
                     </q-item-section>
@@ -527,6 +537,7 @@ import { mapGetters } from "vuex";
 
 export default {
   name: "AlertTemplateForm",
+  emits: ["hide", "ok", "cancel"],
   mixins: [mixins],
   props: { alertTemplate: Object },
   data() {

src/components/modals/alerts/AlertTemplateRelated.vue

@@ -5,7 +5,7 @@
         Assigned to {{ template.name }}
         <q-space />
         <q-btn dense flat icon="close" v-close-popup>
-          <q-tooltip content-class="bg-white text-primary">Close</q-tooltip>
+          <q-tooltip class="bg-white text-primary">Close</q-tooltip>
         </q-btn>
       </q-bar>
       <q-card-section>
@@ -67,6 +67,7 @@
 <script>
 export default {
   name: "AlertTemplateRelated",
+  emits: ["hide", "ok", "cancel"],
   props: {
     template: !Object,
   },

src/components/modals/alerts/AlertsOverview.vue

@@ -7,7 +7,7 @@
         Alerts Overview
         <q-space />
         <q-btn dense flat icon="close" v-close-popup>
-          <q-tooltip content-class="bg-white text-primary">Close</q-tooltip>
+          <q-tooltip class="bg-white text-primary">Close</q-tooltip>
         </q-btn>
       </q-bar>
 
@@ -57,13 +57,13 @@
         <q-table
           :table-class="{ 'table-bgcolor': !$q.dark.isActive, 'table-bgcolor-dark': $q.dark.isActive }"
           class="audit-mgr-tbl-sticky"
-          :data="alerts"
+          :rows="alerts"
           :columns="columns"
           :rows-per-page-options="[25, 50, 100, 500, 1000]"
-          :pagination.sync="pagination"
+          :v-model:pagination="pagination"
           :no-data-label="noDataText"
           :visible-columns="visibleColumns"
-          :selected.sync="selectedAlerts"
+          :v-model:selected="selectedAlerts"
           selection="multiple"
           binary-state-sort
           row-key="id"
@@ -162,6 +162,7 @@ import ScriptOutput from "@/components/modals/checks/ScriptOutput";
 
 export default {
   name: "AlertsOverview",
+  emits: ["hide"],
   mixins: [mixins],
   data() {
     return {

src/components/modals/checks/CpuLoadCheck.vue

@@ -59,6 +59,7 @@
 import mixins from "@/mixins/mixins";
 export default {
   name: "CpuLoadCheck",
+  emits: ["close"],
   props: {
     agentpk: Number,
     policypk: Number,

src/components/modals/checks/DiskSpaceCheck.vue

@@ -69,6 +69,7 @@ import { mapGetters } from "vuex";
 import mixins from "@/mixins/mixins";
 export default {
   name: "DiskSpaceCheck",
+  emits: ["close"],
   props: {
     agentpk: Number,
     policypk: Number,

src/components/modals/checks/EventLogCheck.vue

@@ -137,6 +137,7 @@
 import mixins from "@/mixins/mixins";
 export default {
   name: "EventLogCheck",
+  emits: ["close"],
   props: {
     agentpk: Number,
     policypk: Number,

src/components/modals/checks/EventLogCheckOutput.vue

@@ -11,9 +11,9 @@
           dense
           :table-class="{ 'table-bgcolor': !$q.dark.isActive, 'table-bgcolor-dark': $q.dark.isActive }"
           class="remote-bg-tbl-sticky"
-          :data="evtlogdata.extra_details.log"
+          :rows="evtlogdata.extra_details.log"
           :columns="columns"
-          :pagination.sync="pagination"
+          :v-model:pagination="pagination"
           row-key="uid"
           binary-state-sort
           virtual-scroll
@@ -45,7 +45,7 @@ export default {
       ],
     };
   },
-  beforeDestroy() {
+  beforeUnmount() {
     this.$emit("close");
   },
 };

src/components/modals/checks/MemCheck.vue

@@ -59,6 +59,7 @@
 import mixins from "@/mixins/mixins";
 export default {
   name: "MemCheck",
+  emits: ["close"],
   props: {
     agentpk: Number,
     policypk: Number,

src/components/modals/checks/PingCheck.vue

@@ -61,6 +61,7 @@
 import mixins from "@/mixins/mixins";
 export default {
   name: "PingCheck",
+  emits: ["close"],
   props: {
     agentpk: Number,
     policypk: Number,

src/components/modals/checks/ScriptCheck.vue

@@ -34,7 +34,12 @@
           @input="setScriptDefaults"
         >
           <template v-slot:option="scope">
-            <q-item v-if="!scope.opt.category" v-bind="scope.itemProps" v-on="scope.itemEvents" class="q-pl-lg">
+            <q-item
+              v-if="!scope.opt.category"
+              v-bind="scope.itemProps"
+              v-on="scope.itemProps.itemEvents"
+              class="q-pl-lg"
+            >
               <q-item-section>
                 <q-item-label v-html="scope.opt.label"></q-item-label>
               </q-item-section>
@@ -127,6 +132,7 @@ import { mapGetters } from "vuex";
 
 export default {
   name: "ScriptCheck",
+  emits: ["close"],
   props: {
     agentpk: Number,
     policypk: Number,

src/components/modals/checks/ScriptOutput.vue

@@ -5,7 +5,7 @@
         {{ scriptInfo.readable_desc }}
         <q-space />
         <q-btn dense flat icon="close" v-close-popup>
-          <q-tooltip content-class="bg-white text-primary">Close</q-tooltip>
+          <q-tooltip class="bg-white text-primary">Close</q-tooltip>
         </q-btn>
       </q-bar>
       <q-card-section>
@@ -40,6 +40,7 @@
 <script>
 export default {
   name: "ScriptOutput",
+  emits: ["hide", "ok", "cancel"],
   props: ["scriptInfo"],
   methods: {
     show() {

src/components/modals/checks/WinSvcCheck.vue

@@ -136,6 +136,7 @@ import mixins from "@/mixins/mixins";
 import { mapGetters } from "vuex";
 export default {
   name: "WinSvcCheck",
+  emits: ["close"],
   props: {
     agentpk: Number,
     policypk: Number,

src/components/modals/clients/ClientsForm.vue

@@ -5,7 +5,7 @@
         {{ title }}
         <q-space />
         <q-btn dense flat icon="close" v-close-popup>
-          <q-tooltip content-class="bg-white text-primary">Close</q-tooltip>
+          <q-tooltip class="bg-white text-primary">Close</q-tooltip>
         </q-btn>
       </q-bar>
       <q-card-section>
@@ -48,6 +48,7 @@ import CustomField from "@/components/CustomField";
 import mixins from "@/mixins/mixins";
 export default {
   name: "ClientsForm",
+  emits: ["hide", "ok", "cancel"],
   components: {
     CustomField,
   },

src/components/modals/clients/DeleteClient.vue

@@ -5,7 +5,7 @@
         Delete {{ object.name }}
         <q-space />
         <q-btn dense flat icon="close" v-close-popup>
-          <q-tooltip content-class="bg-white text-primary">Close</q-tooltip>
+          <q-tooltip class="bg-white text-primary">Close</q-tooltip>
         </q-btn>
       </q-bar>
       <q-form @submit="submit">
@@ -22,7 +22,12 @@
             :rules="[val => !!val || 'Select the site that the agents should be moved to']"
           >
             <template v-slot:option="scope">
-              <q-item v-if="!scope.opt.category" v-bind="scope.itemProps" v-on="scope.itemEvents" class="q-pl-lg">
+              <q-item
+                v-if="!scope.opt.category"
+                v-bind="scope.itemProps"
+                v-on="scope.itemProps.itemEvents"
+                class="q-pl-lg"
+              >
                 <q-item-section>
                   <q-item-label v-html="scope.opt.label"></q-item-label>
                 </q-item-section>
@@ -46,6 +51,7 @@
 import mixins from "@/mixins/mixins";
 export default {
   name: "DeleteClient",
+  emits: ["hide", "ok", "cancel"],
   mixins: [mixins],
   props: {
     object: !Object,

src/components/modals/clients/NewDeployment.vue

@@ -81,6 +81,7 @@ import { date } from "quasar";
 
 export default {
   name: "NewDeployment",
+  emits: ["close", "add"],
   mixins: [mixins],
   data() {
     return {
@@ -111,7 +112,7 @@ export default {
         .post("/clients/deployments/", data)
         .then(r => {
           this.$emit("close");
-          this.$emit("added");
+          this.$emit("add");
           this.notifySuccess("Deployment added");
         })
         .catch(e => {});

src/components/modals/clients/SitesForm.vue

@@ -5,7 +5,7 @@
         {{ title }}
         <q-space />
         <q-btn dense flat icon="close" v-close-popup>
-          <q-tooltip content-class="bg-white text-primary">Close</q-tooltip>
+          <q-tooltip class="bg-white text-primary">Close</q-tooltip>
         </q-btn>
       </q-bar>
       <q-card-section>
@@ -52,7 +52,8 @@
 import CustomField from "@/components/CustomField";
 import mixins from "@/mixins/mixins";
 export default {
-  name: "ClientsForm",
+  name: "SitesForm",
+  emits: ["hide", "ok", "cancel"],
   components: {
     CustomField,
   },

src/components/modals/clients/SitesTable.vue

@@ -6,7 +6,7 @@
           <q-btn @click="getSites" class="q-mr-sm" dense flat push icon="refresh" />Sites for {{ client.name }}
           <q-space />
           <q-btn dense flat icon="close" v-close-popup>
-            <q-tooltip content-class="bg-white text-primary">Close</q-tooltip>
+            <q-tooltip class="bg-white text-primary">Close</q-tooltip>
           </q-btn>
         </q-bar>
         <div class="q-pa-sm" style="min-height: 40vh; max-height: 40vh">
@@ -15,9 +15,9 @@
           </div>
           <q-table
             dense
-            :data="sites"
+            :rows="sites"
             :columns="columns"
-            :pagination.sync="pagination"
+            :v-model:pagination="pagination"
             row-key="id"
             binary-state-sort
             hide-pagination
@@ -71,6 +71,7 @@ import DeleteClient from "@/components/modals/clients/DeleteClient";
 
 export default {
   name: "SitesTable",
+  emits: ["hide", "ok", "cancel"],
   mixins: [mixins],
   props: {
     client: !Object,
@@ -103,9 +104,10 @@ export default {
       this.$q
         .dialog({
           component: DeleteClient,
-          parent: this,
-          object: site,
-          type: "site",
+          componentProps: {
+            object: site,
+            type: "site",
+          },
         })
         .onOk(() => {
           this.getSites();
@@ -115,9 +117,10 @@ export default {
       this.$q
         .dialog({
           component: SitesForm,
-          parent: this,
-          site: site,
-          client: site.client,
+          componentProps: {
+            site: site,
+            client: site.client,
+          },
         })
         .onOk(() => {
           this.getSites();
@@ -127,8 +130,9 @@ export default {
       this.$q
         .dialog({
           component: SitesForm,
-          parent: this,
-          client: this.client.id,
+          componentProps: {
+            client: this.client.id,
+          },
         })
         .onOk(() => {
           this.getSites();

src/components/modals/core/UploadMesh.vue

@@ -40,6 +40,7 @@ import mixins from "@/mixins/mixins";
 
 export default {
   name: "UploadMesh",
+  emits: ["close"],
   mixins: [mixins],
   data() {
     return {

src/components/modals/coresettings/CustomFields.vue

@@ -101,8 +101,9 @@ export default {
       this.$q
         .dialog({
           component: CustomFieldsForm,
-          parent: this,
-          model: this.tab,
+          componentProps: {
+            model: this.tab,
+          },
         })
         .onOk(() => {
           this.getCustomFields();

src/components/modals/coresettings/CustomFieldsForm.vue

@@ -5,7 +5,7 @@
         {{ title }}
         <q-space />
         <q-btn dense flat icon="close" v-close-popup>
-          <q-tooltip content-class="bg-white text-primary">Close</q-tooltip>
+          <q-tooltip class="bg-white text-primary">Close</q-tooltip>
         </q-btn>
       </q-bar>
       <q-form @submit="submit">
@@ -164,6 +164,7 @@ import mixins from "@/mixins/mixins";
 
 export default {
   name: "CustomFieldsForm",
+  emits: ["hide", "ok", "cancel"],
   mixins: [mixins],
   props: { field: Object, model: String },
   data() {

src/components/modals/coresettings/CustomFieldsTable.vue

@@ -1,9 +1,9 @@
 <template>
   <q-table
     dense
-    :data="data"
+    :rows="data"
     :columns="columns"
-    :pagination.sync="pagination"
+    :v-model:pagination="pagination"
     row-key="id"
     binary-state-sort
     hide-pagination
@@ -58,7 +58,7 @@
         </q-td>
         <q-td v-else>
           {{ truncateText(props.row.default_value_string) }}
-          <q-tooltip v-if="props.row.default_value_string.length >= 60" content-style="font-size: 12px">{{
+          <q-tooltip v-if="props.row.default_value_string.length >= 60" style="font-size: 12px">{{
             props.row.default_value_string
           }}</q-tooltip>
         </q-td>
@@ -77,6 +77,7 @@ import mixins from "@/mixins/mixins";
 
 export default {
   name: "CustomFieldsTable",
+  emits: ["refresh"],
   mixins: [mixins],
   props: {
     data: !Array,
@@ -114,8 +115,9 @@ export default {
       this.$q
         .dialog({
           component: CustomFieldsForm,
-          parent: this,
-          field: field,
+          componentProps: {
+            field: field,
+          },
         })
         .onOk(() => {
           this.refresh();

src/components/modals/coresettings/EditCoreSettings.vue

@@ -357,6 +357,7 @@ import URLActionsTable from "@/components/modals/coresettings/URLActionsTable";
 
 export default {
   name: "EditCoreSettings",
+  emits: ["close"],
   components: {
     CustomFields,
     KeyStoreTable,
@@ -418,7 +419,6 @@ export default {
     showResetPatchPolicy() {
       this.$q.dialog({
         component: ResetPatchPolicy,
-        parent: this,
       });
     },
     toggleAddEmail() {

src/components/modals/coresettings/KeyStoreForm.vue

@@ -5,7 +5,7 @@
         {{ title }}
         <q-space />
         <q-btn dense flat icon="close" v-close-popup>
-          <q-tooltip content-class="bg-white text-primary">Close</q-tooltip>
+          <q-tooltip class="bg-white text-primary">Close</q-tooltip>
         </q-btn>
       </q-bar>
       <q-form @submit="submit">
@@ -33,6 +33,7 @@ import mixins from "@/mixins/mixins";
 
 export default {
   name: "KeyStoreForm",
+  emits: ["hide", "ok", "cancel"],
   mixins: [mixins],
   props: { globalKey: Object },
   data() {

src/components/modals/coresettings/KeyStoreTable.vue

@@ -8,9 +8,9 @@
     <hr />
     <q-table
       dense
-      :data="keystore"
+      :rows="keystore"
       :columns="columns"
-      :pagination.sync="pagination"
+      :v-model:pagination="pagination"
       row-key="id"
       binary-state-sort
       hide-pagination
@@ -109,7 +109,6 @@ export default {
       this.$q
         .dialog({
           component: KeyStoreForm,
-          parent: this,
         })
         .onOk(() => {
           this.getKeyStore();
@@ -119,8 +118,9 @@ export default {
       this.$q
         .dialog({
           component: KeyStoreForm,
-          parent: this,
-          globalKey: key,
+          componentProps: {
+            globalKey: key,
+          },
         })
         .onOk(() => {
           this.getKeyStore();

src/components/modals/coresettings/ResetPatchPolicy.vue

@@ -5,7 +5,7 @@
         Reset Agent Patch Policy
         <q-space />
         <q-btn dense flat icon="close" v-close-popup>
-          <q-tooltip content-class="bg-white text-primary">Close</q-tooltip>
+          <q-tooltip class="bg-white text-primary">Close</q-tooltip>
         </q-btn>
       </q-bar>
       <q-card-section>
@@ -52,6 +52,7 @@ import mixins from "@/mixins/mixins";
 
 export default {
   name: "ResetPatchPolicy",
+  emits: ["hide", "ok", "cancel"],
   mixins: [mixins],
   data() {
     return {

src/components/modals/coresettings/URLActionsForm.vue

@@ -5,7 +5,7 @@
         {{ title }}
         <q-space />
         <q-btn dense flat icon="close" v-close-popup>
-          <q-tooltip content-class="bg-white text-primary">Close</q-tooltip>
+          <q-tooltip class="bg-white text-primary">Close</q-tooltip>
         </q-btn>
       </q-bar>
       <q-form @submit="submit">
@@ -44,6 +44,7 @@ import mixins from "@/mixins/mixins";
 
 export default {
   name: "URLActionsForm",
+  emits: ["hide", "ok", "cancel"],
   mixins: [mixins],
   props: { action: Object },
   data() {

src/components/modals/coresettings/URLActionsTable.vue

@@ -8,9 +8,9 @@
     <hr />
     <q-table
       dense
-      :data="actions"
+      :rows="actions"
       :columns="columns"
-      :pagination.sync="pagination"
+      :v-model:pagination="pagination"
       row-key="id"
       binary-state-sort
       hide-pagination
@@ -120,7 +120,6 @@ export default {
       this.$q
         .dialog({
           component: URLActionsForm,
-          parent: this,
         })
         .onOk(() => {
           this.getURLActions();
@@ -130,8 +129,9 @@ export default {
       this.$q
         .dialog({
           component: URLActionsForm,
-          parent: this,
-          action: action,
+          componentProps: {
+            action: action,
+          },
         })
         .onOk(() => {
           this.getURLActions();

src/components/modals/coresettings/UserPreferences.vue

@@ -105,6 +105,7 @@ import mixins from "@/mixins/mixins";
 
 export default {
   name: "UserPreferences",
+  emits: ["edit", "close"],
   mixins: [mixins],
   data() {
     return {
@@ -209,7 +210,7 @@ export default {
         .patch("/accounts/users/ui/", data)
         .then(r => {
           this.notifySuccess("Preferences were saved!");
-          this.$emit("edited");
+          this.$emit("edit");
           this.$store.dispatch("loadTree");
           this.$emit("close");
         })

src/components/modals/logs/LogModal.vue

@@ -6,7 +6,7 @@
       <q-btn color="primary" text-color="white" label="Download log" @click="downloadLog" />
       <q-space />
       <q-btn dense flat icon="close" v-close-popup>
-        <q-tooltip content-class="bg-white text-primary">Close</q-tooltip>
+        <q-tooltip class="bg-white text-primary">Close</q-tooltip>
       </q-btn>
     </q-bar>
     <div class="q-pa-md row">

src/components/modals/logs/PendingActions.vue

@@ -39,10 +39,10 @@
         dense
         :table-class="{ 'table-bgcolor': !$q.dark.isActive, 'table-bgcolor-dark': $q.dark.isActive }"
         class="remote-bg-tbl-sticky"
-        :data="actions"
+        :rows="actions"
         :columns="columns"
         :visible-columns="visibleColumns"
-        :pagination.sync="pagination"
+        :v-model:pagination="pagination"
         row-key="id"
         binary-state-sort
         hide-bottom
@@ -50,7 +50,7 @@
         flat
         :rows-per-page-options="[0]"
       >
-        <template slot="body" slot-scope="props" :props="props">
+        <template v-slot:body="props">
           <q-tr
             :class="rowClass(props.row.id, props.row.status)"
             @click="rowSelected(props.row.id, props.row.status, props.row.action_type)"
@@ -101,6 +101,7 @@
 import mixins from "@/mixins/mixins";
 export default {
   name: "PendingActions",
+  emits: ["edit"],
   mixins: [mixins],
   props: {
     agentpk: Number,
@@ -190,7 +191,7 @@ export default {
             .then(r => {
               this.$q.loading.hide();
               this.getPendingActions();
-              this.$emit("edited");
+              this.$emit("edit");
               this.notifySuccess(r.data, 3000);
             })
             .catch(e => {

src/components/modals/scripts/ScriptFormModal.vue

@@ -5,13 +5,13 @@
         {{ title }}
         <q-space />
         <q-btn dense flat icon="minimize" @click="maximized = false" :disable="!maximized">
-          <q-tooltip v-if="maximized" content-class="bg-white text-primary">Minimize</q-tooltip>
+          <q-tooltip v-if="maximized" class="bg-white text-primary">Minimize</q-tooltip>
         </q-btn>
         <q-btn dense flat icon="crop_square" @click="maximized = true" :disable="maximized">
-          <q-tooltip v-if="!maximized" content-class="bg-white text-primary">Maximize</q-tooltip>
+          <q-tooltip v-if="!maximized" class="bg-white text-primary">Maximize</q-tooltip>
         </q-btn>
         <q-btn dense flat icon="close" v-close-popup>
-          <q-tooltip content-class="bg-white text-primary">Close</q-tooltip>
+          <q-tooltip class="bg-white text-primary">Close</q-tooltip>
         </q-btn>
       </q-bar>
       <q-form @submit="submit">
@@ -101,8 +101,9 @@
           v-model="localScript.code"
           :highlight="highlighter"
           :style="heightVar"
-          lineNumbers
-        ></prism-editor>
+          line-numbers
+          @click="focusTextArea"
+        />
         <q-card-actions v-if="!readonly" align="right">
           <q-btn dense flat label="Cancel" v-close-popup />
           <q-btn dense flat label="Save" color="primary" type="submit" />
@@ -125,6 +126,7 @@ import "prismjs/themes/prism-tomorrow.css";
 
 export default {
   name: "ScriptFormModal",
+  emits: ["hide", "ok", "cancel"],
   mixins: [mixins],
   components: {
     PrismEditor,
@@ -226,6 +228,9 @@ export default {
         }
       });
     },
+    focusTextArea() {
+      document.getElementsByClassName("prism-editor__textarea")[0].focus();
+    },
   },
   computed: {
     favoriteIcon() {
@@ -280,10 +285,6 @@ export default {
   height: var(--prism-height);
 }
 
-.prism-editor__container {
-  height: 30000em;
-}
-
 /* optional class for removing the outline */
 .prism-editor__textarea:focus {
   outline: none;
@@ -291,7 +292,7 @@ export default {
 
 .prism-editor__textarea,
 .prism-editor__container {
-  width: 1000em !important;
+  width: 500em !important;
   -ms-overflow-style: none;
   scrollbar-width: none;
 }

src/components/modals/scripts/ScriptUploadModal.vue

@@ -4,7 +4,7 @@
       Add Script
       <q-space />
       <q-btn dense flat icon="close" v-close-popup>
-        <q-tooltip content-class="bg-white text-primary">Close</q-tooltip>
+        <q-tooltip class="bg-white text-primary">Close</q-tooltip>
       </q-btn>
     </q-bar>
     <q-form @submit.prevent="submit">
@@ -109,6 +109,7 @@ import mixins from "@/mixins/mixins";
 
 export default {
   name: "ScriptModal",
+  emits: ["add", "close"],
   mixins: [mixins],
   props: {
     categories: !Array,
@@ -159,7 +160,7 @@ export default {
         .then(r => {
           this.$q.loading.hide();
           this.$emit("close");
-          this.$emit("added");
+          this.$emit("add");
           this.notifySuccess(r.data);
         })
         .catch(e => {

src/components/modals/software/InstallSoftware.vue

@@ -6,9 +6,9 @@
         :table-class="{ 'table-bgcolor': !$q.dark.isActive, 'table-bgcolor-dark': $q.dark.isActive }"
         title="Software"
         dense
-        :data="chocos"
+        :rows="chocos"
         :columns="columns"
-        :pagination.sync="pagination"
+        :v-model:pagination="pagination"
         :filter="filter"
         binary-state-sort
         hide-bottom
@@ -25,7 +25,7 @@
           <q-space />
           <q-btn icon="close" flat round dense v-close-popup />
         </template>
-        <template slot="body" slot-scope="props" :props="props">
+        <template v-slot:body="props">
           <q-tr :props="props">
             <q-td auto-width>
               <q-btn size="sm" color="grey-5" icon="fas fa-plus" text-color="black" @click="install(props.row.name)" />
@@ -45,6 +45,7 @@ import { mapGetters } from "vuex";
 import mixins from "@/mixins/mixins";
 export default {
   name: "InstallSoftware",
+  emits: ["close"],
   props: ["agentpk"],
   mixins: [mixins],
   data() {

src/components/modals/tasks/AddAutomatedTask.vue

@@ -32,7 +32,12 @@
             @input="setScriptDefaults"
           >
             <template v-slot:option="scope">
-              <q-item v-if="!scope.opt.category" v-bind="scope.itemProps" v-on="scope.itemEvents" class="q-pl-lg">
+              <q-item
+                v-if="!scope.opt.category"
+                v-bind="scope.itemProps"
+                v-on="scope.itemProps.itemEvents"
+                class="q-pl-lg"
+              >
                 <q-item-section>
                   <q-item-label v-html="scope.opt.label"></q-item-label>
                 </q-item-section>
@@ -217,6 +222,7 @@ import mixins from "@/mixins/mixins";
 
 export default {
   name: "AddAutomatedTask",
+  emits: ["close"],
   props: {
     policypk: Number,
   },

src/components/modals/tasks/EditAutomatedTask.vue

@@ -5,7 +5,7 @@
         Edit {{ task.name }}
         <q-space />
         <q-btn dense flat icon="close" v-close-popup>
-          <q-tooltip content-class="bg-white text-primary">Close</q-tooltip>
+          <q-tooltip class="bg-white text-primary">Close</q-tooltip>
         </q-btn>
       </q-bar>
       <q-form @submit="submit">
@@ -23,7 +23,12 @@
             @input="setScriptDefaults"
           >
             <template v-slot:option="scope">
-              <q-item v-if="!scope.opt.category" v-bind="scope.itemProps" v-on="scope.itemEvents" class="q-pl-lg">
+              <q-item
+                v-if="!scope.opt.category"
+                v-bind="scope.itemProps"
+                v-on="scope.itemProps.itemEvents"
+                class="q-pl-lg"
+              >
                 <q-item-section>
                   <q-item-label v-html="scope.opt.label"></q-item-label>
                 </q-item-section>
@@ -124,6 +129,7 @@ import { mapGetters } from "vuex";
 
 export default {
   name: "EditAutomatedTask",
+  emits: ["hide", "ok", "cancel"],
   mixins: [mixins],
   props: {
     task: !Object,

src/components/ui/DialogWrapper.vue

@@ -6,7 +6,7 @@
           {{ title }}
           <q-space />
           <q-btn dense flat icon="close" v-close-popup>
-            <q-tooltip content-class="bg-white text-primary">Close</q-tooltip>
+            <q-tooltip class="bg-white text-primary">Close</q-tooltip>
           </q-btn>
         </slot>
       </q-bar>
@@ -20,6 +20,7 @@
 <script>
 export default {
   name: "DialogWrapper",
+  emits: ["hide", "ok", "cancel"],
   props: {
     vuecomponent: {},
     title: String,

src/router/index.js

@@ -1,16 +1,15 @@
-import Vue from "vue";
-import VueRouter from "vue-router";
-
+import { createRouter, createMemoryHistory, createWebHistory, createWebHashHistory } from 'vue-router'
 import routes from './routes';
 
-Vue.use(VueRouter);
-
 export default function ({ store }) {
-  const Router = new VueRouter({
-    scrollBehavior: () => ({ x: 0, y: 0 }),
+  const createHistory = process.env.SERVER
+    ? createMemoryHistory
+    : process.env.VUE_ROUTER_MODE === 'history' ? createWebHistory : createWebHashHistory
+
+  const Router = new createRouter({
+    scrollBehavior: () => ({ left: 0, top: 0 }),
     routes,
-    mode: process.env.VUE_ROUTER_MODE,
-    base: process.env.VUE_ROUTER_BASE
+    history: createHistory(process.env.MODE === 'ssr' ? void 0 : process.env.VUE_ROUTER_BASE)
   })
 
   Router.beforeEach((to, from, next) => {

src/router/routes.js

@@ -52,7 +52,7 @@ const routes = [
     name: "SessionExpired",
     component: () => import("@/views/SessionExpired")
   },
-  { path: "*", component: () => import("@/views/NotFound") }
+  { path: "/:catchAll(.*)*", component: () => import("@/views/NotFound") }
 ]
 
 export default routes

src/store/index.js

@@ -1,13 +1,9 @@
-import Vue from "vue";
-import Vuex from "vuex";
+import { createStore } from 'vuex'
 import axios from "axios";
-import { Notify } from "quasar";
 import adminModule from "./admin.js"
 
-Vue.use(Vuex);
-
 export default function () {
-  const Store = new Vuex.Store({
+  const Store = new createStore({
     modules: {
       admin: adminModule
     },

src/views/Dashboard.vue

@@ -116,7 +116,7 @@
                 node-key="raw"
                 no-nodes-label="No Clients"
                 selected-color="primary"
-                :selected.sync="selectedTree"
+                :v-model:selected="selectedTree"
                 @update:selected="loadFrame(selectedTree)"
               >
                 <template v-slot:default-header="props">
@@ -345,14 +345,14 @@
                 :userName="user"
                 :search="search"
                 :visibleColumns="visibleColumns"
-                @refreshEdit="refreshEntireSite"
+                @edit="refreshEntireSite"
               />
             </template>
             <template v-slot:separator>
               <q-avatar color="primary" text-color="white" size="30px" icon="drag_indicator" />
             </template>
             <template v-slot:after>
-              <SubTableTabs @refreshEdit="refreshEntireSite" />
+              <SubTableTabs @edit="refreshEntireSite" />
             </template>
           </q-splitter>
         </template>
@@ -365,7 +365,7 @@
     </q-dialog>
     <!-- user preferences modal -->
     <q-dialog v-model="showUserPreferencesModal">
-      <UserPreferences @close="showUserPreferencesModal = false" @edited="getDashInfo" />
+      <UserPreferences @close="showUserPreferencesModal = false" @edit="getDashInfo" />
     </q-dialog>
   </q-layout>
 </template>
@@ -660,9 +660,10 @@ export default {
       this.$q
         .dialog({
           component: PolicyAdd,
-          parent: this,
-          type: node.children ? "client" : "site",
-          object: node,
+          componentProps: {
+            type: node.children ? "client" : "site",
+            object: node,
+          },
         })
         .onOk(() => {
           this.clearTreeSelected();
@@ -671,8 +672,9 @@ export default {
     showAddSiteModal(node) {
       this.$q.dialog({
         component: SitesForm,
-        parent: this,
-        client: node.id,
+        componentProps: {
+          client: node.id,
+        },
       });
     },
     showEditModal(node) {
@@ -685,16 +687,18 @@ export default {
 
       this.$q.dialog({
         component: node.children ? ClientsForm : SitesForm,
-        parent: this,
-        ...props,
+        componentProps: {
+          ...props,
+        },
       });
     },
     showDeleteModal(node) {
       this.$q.dialog({
         component: DeleteClient,
-        parent: this,
-        object: { id: node.id, name: node.label },
-        type: node.children ? "client" : "site",
+        componentProps: {
+          object: { id: node.id, name: node.label },
+          type: node.children ? "client" : "site",
+        },
       });
     },
     showInstallAgent(node) {
@@ -709,9 +713,10 @@ export default {
       this.$q
         .dialog({
           component: AlertTemplateAdd,
-          parent: this,
-          type: node.children ? "client" : "site",
-          object: node,
+          componentProps: {
+            type: node.children ? "client" : "site",
+            object: node,
+          },
         })
         .onOk(() => {
           this.clearTreeSelected();
@@ -889,7 +894,7 @@ export default {
   mounted() {
     this.livePoll();
   },
-  beforeDestroy() {
+  beforeUnmount() {
     this.ws.close();
     clearInterval(this.poll);
   },

src/views/RemoteBackground.vue

@@ -48,8 +48,17 @@ import ProcessManager from "@/components/ProcessManager";
 import Services from "@/components/Services";
 import EventLog from "@/components/EventLog";
 
+import { createMetaMixin } from "quasar";
+
 export default {
   name: "RemoteBackground",
+  mixins: [
+    createMetaMixin(function () {
+      return {
+        title: this.title,
+      };
+    }),
+  ],
   components: {
     Services,
     EventLog,
@@ -83,11 +92,6 @@ export default {
       });
     },
   },
-  meta() {
-    return {
-      title: this.title,
-    };
-  },
   computed: {
     pk() {
       return this.$route.params.pk;

src/views/TOTPSetup.vue

@@ -83,7 +83,7 @@ export default {
     this.getQRCodeData();
     this.$q.dark.set(false);
   },
-  beforeDestroy() {
+  beforeUnmount() {
     if (!this.cleared_token) {
       this.logout();
     }

src/views/TakeControl.vue

@@ -18,9 +18,18 @@
 <script>
 import mixins from "@/mixins/mixins";
 
+import { createMetaMixin } from "quasar";
+
 export default {
   name: "TakeControl",
-  mixins: [mixins],
+  mixins: [
+    mixins,
+    createMetaMixin(function () {
+      return {
+        title: this.title,
+      };
+    }),
+  ],
   data() {
     return {
       control: "",
@@ -48,11 +57,6 @@ export default {
       }
     },
   },
-  meta() {
-    return {
-      title: this.title,
-    };
-  },
   methods: {
     getUI() {
       this.$store.dispatch("getDashInfo").then(r => {