From efdad0102cee53b7cd9dfa0b78f4615a248840f2 Mon Sep 17 00:00:00 2001
From: Tobias Klika <cee@live.at>
Date: Wed, 14 Oct 2020 13:18:29 +0200
Subject: [PATCH] navigation in backoffice works again

---
 zero.Web.UI/App/app.vue                       |  16 +-
 .../App/components/buttons/add-button.vue     |   2 +
 zero.Web.UI/App/components/buttons/button.vue |  15 +-
 .../App/components/buttons/dot-button.vue     |   4 +-
 .../App/components/buttons/icon-button.vue    |   4 +-
 .../App/components/buttons/select-button.vue  |   2 +
 .../App/components/buttons/state-button.vue   |   2 +
 .../App/components/datagrid/datagrid.vue      |   4 +-
 zero.Web.UI/App/components/forms/alias.vue    |   2 +
 .../App/components/forms/check-list.vue       |   2 +
 .../App/components/forms/error-view.vue       |   1 +
 .../App/components/forms/form-header.vue      |   4 +-
 zero.Web.UI/App/components/forms/form.vue     |   2 +
 .../App/components/forms/input-list.vue       |   2 +
 .../App/components/forms/media-old.vue        |   2 +
 zero.Web.UI/App/components/forms/rte.vue      |   2 +
 zero.Web.UI/App/components/forms/search.vue   |   2 +
 zero.Web.UI/App/components/forms/tags.vue     |   2 +
 zero.Web.UI/App/components/forms/toggle.vue   |   2 +
 .../App/components/modules/module-preview.vue |   2 +
 .../App/components/modules/modules-select.vue |   2 +
 .../App/components/modules/modules.vue        |   2 +
 .../App/components/overlays/confirm.vue       |   2 -
 .../components/overlays/dropdown-button.vue   |  34 +--
 .../App/components/overlays/dropdown.vue      |   4 +-
 .../components/overlays/overlay-holder.vue    |  17 +-
 zero.Web.UI/App/components/pagination.vue     |   2 +
 zero.Web.UI/App/components/permissions.vue    |   2 +
 .../pickers/colorPicker/colorpicker.vue       |   2 +
 .../pickers/countryPicker/countrypicker.vue   |   2 +
 .../pickers/datePicker/datepicker.vue         |   2 +
 .../components/pickers/datePicker/overlay.vue |   2 +
 .../dateRangePicker/daterangepicker.vue       |   2 +
 .../pickers/iconPicker/iconpicker.vue         |   2 +
 .../pickers/mediaPicker/mediapicker.vue       |   2 +
 zero.Web.UI/App/components/pickers/pick.vue   |   2 +
 .../pickers/userPicker/userpicker.vue         |   2 +
 .../components/{globals.js => register.js}    |  24 +-
 .../App/components/tables/table-filter.vue    |  24 +-
 zero.Web.UI/App/components/tables/table.vue   |  14 +-
 zero.Web.UI/App/components/tabs/tabs.vue      |   2 +-
 zero.Web.UI/App/components/tree/tree-item.vue |   4 +-
 zero.Web.UI/App/components/tree/tree.vue      |   4 +-
 zero.Web.UI/App/core/plugin.js                |  56 ++++
 zero.Web.UI/App/directives/register.js        |   8 -
 zero.Web.UI/App/editor/editor-component.vue   |   2 +
 zero.Web.UI/App/editor/editor.vue             |   2 +
 zero.Web.UI/App/editor/fields/alias.vue       |   2 +
 zero.Web.UI/App/editor/fields/amount.vue      |   2 +
 zero.Web.UI/App/editor/fields/checklist.vue   |   2 +
 zero.Web.UI/App/editor/fields/colorpicker.vue |   2 +
 .../App/editor/fields/countrypicker.vue       |   2 +
 zero.Web.UI/App/editor/fields/culture.vue     |   2 +
 .../App/editor/fields/daterangepicker.vue     |   2 +
 zero.Web.UI/App/editor/fields/iconPicker.vue  |   2 +
 zero.Web.UI/App/editor/fields/inputlist.vue   |   2 +
 zero.Web.UI/App/editor/fields/language.vue    |   2 +
 zero.Web.UI/App/editor/fields/media.vue       |   2 +
 zero.Web.UI/App/editor/fields/modules.vue     |   2 +
 zero.Web.UI/App/editor/fields/nested.vue      |   2 +
 zero.Web.UI/App/editor/fields/number.vue      |   2 +
 zero.Web.UI/App/editor/fields/rte.vue         |   2 +
 zero.Web.UI/App/editor/fields/select.vue      |   2 +
 zero.Web.UI/App/editor/fields/state.vue       |   2 +
 zero.Web.UI/App/editor/fields/tags.vue        |   2 +
 zero.Web.UI/App/editor/fields/text.vue        |   2 +
 zero.Web.UI/App/editor/fields/textarea.vue    |   2 +
 zero.Web.UI/App/editor/fields/toggle.vue      |   2 +
 zero.Web.UI/App/filters/globals.js            |   2 -
 zero.Web.UI/App/filters/localize.js           |  10 -
 zero.Web.UI/App/navigation.vue                |   6 +-
 zero.Web.UI/App/pages/login/login.vue         |   2 +-
 zero.Web.UI/App/pages/media/upload.vue        |   2 +
 zero.Web.UI/App/pages/notfound.vue            |  39 +--
 .../App/pages/pages/overlays/create.vue       |   2 +-
 .../pages/settings/application-features.vue   |   1 +
 .../App/pages/settings/applications-items.vue |   4 +-
 .../App/pages/settings/applications.vue       |   4 +-
 zero.Web.UI/App/pages/settings/settings.vue   |   2 +-
 zero.Web.UI/App/plugin.js                     |  11 +
 zero.Web.UI/App/renderers/globals.js          |  44 ---
 zero.Web.UI/App/renderers/register.js         |  24 ++
 zero.Web.UI/App/router.config.js              |  36 ++-
 zero.Web.UI/App/services/eventhub.js          |  48 +++-
 zero.Web.UI/App/services/notification.js      | 151 ++++++-----
 zero.Web.UI/App/services/overlay.js           | 250 +++++++++---------
 zero.Web.UI/app.js                            |  17 +-
 zero.Web.UI/package.json                      |   1 -
 88 files changed, 592 insertions(+), 403 deletions(-)
 rename zero.Web.UI/App/components/{globals.js => register.js} (82%)
 create mode 100644 zero.Web.UI/App/core/plugin.js
 delete mode 100644 zero.Web.UI/App/filters/globals.js
 delete mode 100644 zero.Web.UI/App/filters/localize.js
 create mode 100644 zero.Web.UI/App/plugin.js
 delete mode 100644 zero.Web.UI/App/renderers/globals.js
 create mode 100644 zero.Web.UI/App/renderers/register.js

diff --git a/zero.Web.UI/App/app.vue b/zero.Web.UI/App/app.vue
index 30555983..8433cd06 100644
--- a/zero.Web.UI/App/app.vue
+++ b/zero.Web.UI/App/app.vue
@@ -1,23 +1,23 @@
 <template>
   <div class="app" :class="getClassList()">
     <template v-if="isAuthenticated">
-      <!--<app-navigation />-->
+      <app-navigation />
       <div class="app-main">
         <router-view></router-view>
       </div>
-      <!--<app-overlays />
-      <app-notifications />-->
+      <app-overlays />
+      <!--<app-notifications />-->
     </template>
-    <!--<app-login v-else />-->
+    <app-login v-else /> 
   </div>
 </template>
 
 
 <script>
   import '../Sass/app.scss'
-  //import AppNavigation from 'zero/navigation.vue'
-  //import AppLogin from 'zero/pages/login/login.vue'
-  //import AppOverlays from 'zero/components/overlays/overlay-holder.vue'
+  import AppNavigation from 'zero/navigation.vue'
+  import AppLogin from 'zero/pages/login/login.vue'
+  import AppOverlays from 'zero/components/overlays/overlay-holder.vue'
   //import AppNotifications from 'zero/components/notifications/notification-holder.vue'
   import AuthApi from 'zero/services/auth.js';
   import EventHub from 'zero/services/eventhub';
@@ -28,7 +28,7 @@
   export default {
     name: 'app',
 
-    //components: { AppNavigation, AppOverlays, AppLogin, AppNotifications },
+    components: { AppNavigation, AppOverlays, AppLogin },
 
     data: () => ({
       isAuthenticated: false
diff --git a/zero.Web.UI/App/components/buttons/add-button.vue b/zero.Web.UI/App/components/buttons/add-button.vue
index e06b4eaf..4ca76f3e 100644
--- a/zero.Web.UI/App/components/buttons/add-button.vue
+++ b/zero.Web.UI/App/components/buttons/add-button.vue
@@ -53,6 +53,8 @@
       }
     },
 
+    emits: ['click'],
+
     computed: {
       application()
       {
diff --git a/zero.Web.UI/App/components/buttons/button.vue b/zero.Web.UI/App/components/buttons/button.vue
index a6f97b54..fe0baf3e 100644
--- a/zero.Web.UI/App/components/buttons/button.vue
+++ b/zero.Web.UI/App/components/buttons/button.vue
@@ -22,6 +22,8 @@
   export default {
     name: 'uiButton',
 
+    emits: ['click'],
+
     props: {
       label: {
         type: String
@@ -130,17 +132,6 @@
         {
           this.stateTimeout = setTimeout(() =>
           {
-            //const stateUpdate = 'update:state';
-
-            //// check if :state property has .sync modifier
-            //let listeners = this.$options._parentListeners;
-            //const hasSyncModifier = listeners && listeners[stateUpdate];
-
-            //if (!hasSyncModifier)
-            //{
-            //  console.warn(`ui-button: Add the .sync modifier to the "state" property, as changing the state to "${STATE_SUCCESS}" or "${STATE_ERROR}" will automatically set it back to "${STATE_DEFAULT}" after the state duration timeout`);
-            //}
-
             this.stateDisplay = STATE_DEFAULT;
           }, this.stateDuration);
         }
@@ -148,7 +139,6 @@
     },
 
     methods: {
-
       tryClick(ev)
       {
         if (this.isDefaultState)
@@ -156,7 +146,6 @@
           this.$emit('click', ev);
         }
       }
-
     }
   }
 </script>
\ No newline at end of file
diff --git a/zero.Web.UI/App/components/buttons/dot-button.vue b/zero.Web.UI/App/components/buttons/dot-button.vue
index dae5bcc5..6f299736 100644
--- a/zero.Web.UI/App/components/buttons/dot-button.vue
+++ b/zero.Web.UI/App/components/buttons/dot-button.vue
@@ -1,5 +1,5 @@
 <template>
-  <button type="button" class="ui-dot-button" :disabled="disabled" @click="tryClick" :title="title | localize">
+  <button type="button" class="ui-dot-button" :disabled="disabled" @click="tryClick" v-localize:title="title">
     <span class="sr-only" v-localize="title"></span>
     <i class="ui-button-icon fth-more-horizontal"></i>
   </button>
@@ -10,6 +10,8 @@
   export default {
     name: 'uiDotButton',
 
+    emits: ['click'],
+
     props: {
       state: {
         type: String,
diff --git a/zero.Web.UI/App/components/buttons/icon-button.vue b/zero.Web.UI/App/components/buttons/icon-button.vue
index ab8e3e38..2ae9bb81 100644
--- a/zero.Web.UI/App/components/buttons/icon-button.vue
+++ b/zero.Web.UI/App/components/buttons/icon-button.vue
@@ -1,5 +1,5 @@
 <template>
-  <button type="button" class="ui-icon-button" :disabled="disabled" :class="'type-' + type.split(' ').join(' type-')" @click="tryClick" :title="title | localize">
+  <button type="button" class="ui-icon-button" :disabled="disabled" :class="'type-' + type.split(' ').join(' type-')" @click="tryClick" v-localize:title="title">
     <span class="sr-only" v-localize="title"></span>
     <i class="ui-button-icon" :class="icon"></i>
   </button>
@@ -10,6 +10,8 @@
   export default {
     name: 'uiIconButton',
 
+    emits: ['click'],
+
     props: {
       state: {
         type: String,
diff --git a/zero.Web.UI/App/components/buttons/select-button.vue b/zero.Web.UI/App/components/buttons/select-button.vue
index aaba2b79..ac289263 100644
--- a/zero.Web.UI/App/components/buttons/select-button.vue
+++ b/zero.Web.UI/App/components/buttons/select-button.vue
@@ -21,6 +21,8 @@
   export default {
     name: 'uiSelectButton',
 
+    emits: ['click'],
+
     props: {
       icon: {
         type: String,
diff --git a/zero.Web.UI/App/components/buttons/state-button.vue b/zero.Web.UI/App/components/buttons/state-button.vue
index e95e6f67..a479d312 100644
--- a/zero.Web.UI/App/components/buttons/state-button.vue
+++ b/zero.Web.UI/App/components/buttons/state-button.vue
@@ -26,6 +26,8 @@
       }
     },
 
+    emits: ['input'],
+
     methods: {
 
       select(value)
diff --git a/zero.Web.UI/App/components/datagrid/datagrid.vue b/zero.Web.UI/App/components/datagrid/datagrid.vue
index f61e1d20..8deefa59 100644
--- a/zero.Web.UI/App/components/datagrid/datagrid.vue
+++ b/zero.Web.UI/App/components/datagrid/datagrid.vue
@@ -71,6 +71,8 @@
       }
     },
 
+    emits: ['count', 'select'],
+
     components: { UiPagination },
 
     watch: {
@@ -116,7 +118,7 @@
     computed: {
       actionsDefined()
       {
-        return this.$scopedSlots.hasOwnProperty('actions');
+        return typeof this.$slots.actions === 'function';
       }
     },
 
diff --git a/zero.Web.UI/App/components/forms/alias.vue b/zero.Web.UI/App/components/forms/alias.vue
index 3d25d5cc..722c674f 100644
--- a/zero.Web.UI/App/components/forms/alias.vue
+++ b/zero.Web.UI/App/components/forms/alias.vue
@@ -15,6 +15,8 @@
   export default {
     name: 'uiAlias',
 
+    emits: ['input'],
+
     props: {
       value: {
         type: String,
diff --git a/zero.Web.UI/App/components/forms/check-list.vue b/zero.Web.UI/App/components/forms/check-list.vue
index 112a0fd6..d94a1ea4 100644
--- a/zero.Web.UI/App/components/forms/check-list.vue
+++ b/zero.Web.UI/App/components/forms/check-list.vue
@@ -15,6 +15,8 @@
   export default {
     name: 'uiCheckList',
 
+    emits: ['input'],
+
     props: {
       value: {
         type: Array,
diff --git a/zero.Web.UI/App/components/forms/error-view.vue b/zero.Web.UI/App/components/forms/error-view.vue
index f63be1c6..a3b34323 100644
--- a/zero.Web.UI/App/components/forms/error-view.vue
+++ b/zero.Web.UI/App/components/forms/error-view.vue
@@ -1,4 +1,5 @@
 <template>
+  <!-- // TODO notfound view works and can be used here -->
   <div class="page page-error" :class="{'theme-dark': dark }">
     <i class="page-error-icon fth-cloud-snow"></i>
     <p class="page-error-text">
diff --git a/zero.Web.UI/App/components/forms/form-header.vue b/zero.Web.UI/App/components/forms/form-header.vue
index d871ba5e..7128ebe4 100644
--- a/zero.Web.UI/App/components/forms/form-header.vue
+++ b/zero.Web.UI/App/components/forms/form-header.vue
@@ -29,6 +29,8 @@
   export default {
     name: 'uiFormHeader',
 
+    emits: ['delete'],
+
     props: {
       title: {
         type: String,
@@ -69,7 +71,7 @@
     computed: {
       actionsDefined()
       {
-        return !this.isCreate && (this.canDelete || this.$scopedSlots.hasOwnProperty('actions'));
+        return !this.isCreate && (this.canDelete || typeof this.$slots.actions === 'function');
       }
     },
 
diff --git a/zero.Web.UI/App/components/forms/form.vue b/zero.Web.UI/App/components/forms/form.vue
index c6792339..4c5b22ca 100644
--- a/zero.Web.UI/App/components/forms/form.vue
+++ b/zero.Web.UI/App/components/forms/form.vue
@@ -32,6 +32,8 @@
       }
     },
 
+    emits: ['load', 'submit'],
+
     data: () => ({
       dirty: false,
       loadingState: 'default',
diff --git a/zero.Web.UI/App/components/forms/input-list.vue b/zero.Web.UI/App/components/forms/input-list.vue
index 76d50787..ebcb21f2 100644
--- a/zero.Web.UI/App/components/forms/input-list.vue
+++ b/zero.Web.UI/App/components/forms/input-list.vue
@@ -16,6 +16,8 @@
   export default {
     name: 'uiInputList',
 
+    emits: ['input'],
+
     props: {
       addLabel: {
         type: String,
diff --git a/zero.Web.UI/App/components/forms/media-old.vue b/zero.Web.UI/App/components/forms/media-old.vue
index 622c9a6d..9e42dee5 100644
--- a/zero.Web.UI/App/components/forms/media-old.vue
+++ b/zero.Web.UI/App/components/forms/media-old.vue
@@ -66,6 +66,8 @@
   export default {
     name: 'uiMediaOld',
 
+    emits: ['input'],
+
     props: {
       disabled: {
         type: Boolean,
diff --git a/zero.Web.UI/App/components/forms/rte.vue b/zero.Web.UI/App/components/forms/rte.vue
index 8d13b892..431b7846 100644
--- a/zero.Web.UI/App/components/forms/rte.vue
+++ b/zero.Web.UI/App/components/forms/rte.vue
@@ -19,6 +19,8 @@
   export default {
     name: 'uiRte',
 
+    emits: ['input'],
+
     props: {
       value: {
         type: String,
diff --git a/zero.Web.UI/App/components/forms/search.vue b/zero.Web.UI/App/components/forms/search.vue
index b7247a54..31064c8e 100644
--- a/zero.Web.UI/App/components/forms/search.vue
+++ b/zero.Web.UI/App/components/forms/search.vue
@@ -23,6 +23,8 @@
       }
     },
 
+    emits: ['input', 'change', 'submit'],
+
     computed: {
       
     },
diff --git a/zero.Web.UI/App/components/forms/tags.vue b/zero.Web.UI/App/components/forms/tags.vue
index cb1814a4..a2599a5a 100644
--- a/zero.Web.UI/App/components/forms/tags.vue
+++ b/zero.Web.UI/App/components/forms/tags.vue
@@ -9,6 +9,8 @@
   export default {
     name: 'uiTags',
 
+    emits: ['input'],
+
     props: {
       addLabel: {
         type: String,
diff --git a/zero.Web.UI/App/components/forms/toggle.vue b/zero.Web.UI/App/components/forms/toggle.vue
index bb5fb5b1..5f49fbc1 100644
--- a/zero.Web.UI/App/components/forms/toggle.vue
+++ b/zero.Web.UI/App/components/forms/toggle.vue
@@ -13,6 +13,8 @@
   export default {
     name: 'uiToggle',
 
+    emits: ['input'],
+
     props: {
       value: {
         type: Boolean,
diff --git a/zero.Web.UI/App/components/modules/module-preview.vue b/zero.Web.UI/App/components/modules/module-preview.vue
index 5eda7488..ecf21518 100644
--- a/zero.Web.UI/App/components/modules/module-preview.vue
+++ b/zero.Web.UI/App/components/modules/module-preview.vue
@@ -33,6 +33,8 @@
   export default {
     name: 'uiModulePreview',
 
+    emits: ['edit', 'remove', 'isActive'],
+
     props: {
       value: {
         type: Object,
diff --git a/zero.Web.UI/App/components/modules/modules-select.vue b/zero.Web.UI/App/components/modules/modules-select.vue
index 49386b92..4385736d 100644
--- a/zero.Web.UI/App/components/modules/modules-select.vue
+++ b/zero.Web.UI/App/components/modules/modules-select.vue
@@ -36,6 +36,8 @@
   export default {
     name: 'uiModulesSelect',
 
+    emits: ['selected'],
+
     props: {
       value: Array,
       config: Object,
diff --git a/zero.Web.UI/App/components/modules/modules.vue b/zero.Web.UI/App/components/modules/modules.vue
index 789bcebf..98a487b8 100644
--- a/zero.Web.UI/App/components/modules/modules.vue
+++ b/zero.Web.UI/App/components/modules/modules.vue
@@ -17,6 +17,8 @@
   export default {
     name: 'uiModules',
 
+    emits: ['input'],
+
     props: {
       value: {
         type: Array,
diff --git a/zero.Web.UI/App/components/overlays/confirm.vue b/zero.Web.UI/App/components/overlays/confirm.vue
index 2c64a458..2cf2a8f2 100644
--- a/zero.Web.UI/App/components/overlays/confirm.vue
+++ b/zero.Web.UI/App/components/overlays/confirm.vue
@@ -12,8 +12,6 @@
 
 
 <script>
-  import Overlay from 'zero/services/overlay.js'
-
   export default {
 
     props: {
diff --git a/zero.Web.UI/App/components/overlays/dropdown-button.vue b/zero.Web.UI/App/components/overlays/dropdown-button.vue
index 4888159f..8c19fe09 100644
--- a/zero.Web.UI/App/components/overlays/dropdown-button.vue
+++ b/zero.Web.UI/App/components/overlays/dropdown-button.vue
@@ -1,18 +1,15 @@
 <template>
-  <!-- // TODO remove surrounding div as soon as we can have multiple roots (vue 3) -->
-  <div @click="onClickShim">
-    <button v-if="!confirming" :disabled="disabled" type="button" @click="onClick" class="ui-dropdown-button" :class="{ 'has-icon': icon, 'is-active': selected, 'is-multiline': multiline }">
-      <i v-if="icon" class="ui-dropdown-button-icon" :class="icon"></i>
-      {{label | localize}}
-      <i v-if="selected" class="ui-dropdown-button-selected fth-check"></i>
-      <i v-if="loading" class="ui-dropdown-button-progress"></i>
-    </button>
-    <div v-if="confirming" class="ui-dropdown-button-confirmation">
-      <i v-if="icon" class="ui-dropdown-button-icon" :class="icon"></i>
-      {{label | localize}}
-      <ui-button type="small primary" label="OK" @click="onClick($event, true)" />
-      <ui-button type="small light" label="Cancel" @click="confirming=false" />
-    </div>
+  <button v-if="!confirming" :disabled="disabled" type="button" @click="onClick" class="ui-dropdown-button" :class="{ 'has-icon': icon, 'is-active': selected, 'is-multiline': multiline }">
+    <i v-if="icon" class="ui-dropdown-button-icon" :class="icon"></i>
+    <span v-localize="label"></span>
+    <i v-if="selected" class="ui-dropdown-button-selected fth-check"></i>
+    <i v-if="loading" class="ui-dropdown-button-progress"></i>
+  </button>
+  <div v-if="confirming" class="ui-dropdown-button-confirmation">
+    <i v-if="icon" class="ui-dropdown-button-icon" :class="icon"></i>
+    <span v-localize="label"></span>
+    <ui-button type="small primary" label="OK" @click="onClick($event, true)" />
+    <ui-button type="small light" label="Cancel" @click="confirming=false" />
   </div>
 </template>
 
@@ -23,6 +20,8 @@
   export default {
     name: 'uiDropdownButton',
 
+    emits: ['click', 'hide'],
+
     props: {
       value: {
         default: null
@@ -126,14 +125,7 @@
             }
           });
         }
-      },
-
-      onClickShim(e)
-      {
-        e.preventDefault();
-        e.stopPropagation();
       }
-
     }
   }
 </script>
diff --git a/zero.Web.UI/App/components/overlays/dropdown.vue b/zero.Web.UI/App/components/overlays/dropdown.vue
index 03c569fe..c1a288d0 100644
--- a/zero.Web.UI/App/components/overlays/dropdown.vue
+++ b/zero.Web.UI/App/components/overlays/dropdown.vue
@@ -16,6 +16,8 @@
   export default {
     name: 'uiDropdown',
 
+    emits: ['opened', 'closed'],
+
     props: {
       align: {
         type: String,
@@ -39,7 +41,7 @@
 
       hasButton()
       {
-        return this.$scopedSlots.hasOwnProperty('button');
+        return typeof this.$slots.button === 'function';
       },
 
       dropdownClasses()
diff --git a/zero.Web.UI/App/components/overlays/overlay-holder.vue b/zero.Web.UI/App/components/overlays/overlay-holder.vue
index 253a6e2a..112e1753 100644
--- a/zero.Web.UI/App/components/overlays/overlay-holder.vue
+++ b/zero.Web.UI/App/components/overlays/overlay-holder.vue
@@ -13,12 +13,12 @@
 
 
 <script>
-  import Overlay from 'zero/services/overlay.js'
+  import EventHub from 'zero/services/eventhub';
   import { filter as _filter } from 'underscore';
 
   export default {
     data: () => ({
-      instances: Overlay.instances
+      instances: []
     }),
 
     computed: {
@@ -28,6 +28,19 @@
       }
     },
 
+    mounted()
+    {
+      EventHub.on('overlay:open', instances =>
+      {
+        console.info('open');
+        this.instances = instances;
+      });
+      EventHub.on('overlay:close', instances =>
+      {
+        this.instances = instances;
+      });
+    },
+
     methods: {
       close(instance)
       {
diff --git a/zero.Web.UI/App/components/pagination.vue b/zero.Web.UI/App/components/pagination.vue
index cecb0c3c..c41cf29a 100644
--- a/zero.Web.UI/App/components/pagination.vue
+++ b/zero.Web.UI/App/components/pagination.vue
@@ -19,6 +19,8 @@
   export default {
     name: 'uiPagination',
 
+    emits: ['update:page', 'change'],
+
     props: {
       pages: {
         type: Number,
diff --git a/zero.Web.UI/App/components/permissions.vue b/zero.Web.UI/App/components/permissions.vue
index 2a2cc024..afd88315 100644
--- a/zero.Web.UI/App/components/permissions.vue
+++ b/zero.Web.UI/App/components/permissions.vue
@@ -24,6 +24,8 @@
   export default {
     name: 'uiPermissions',
 
+    emits: ['input'],
+
     props: {
       value: {
         type: Array,
diff --git a/zero.Web.UI/App/components/pickers/colorPicker/colorpicker.vue b/zero.Web.UI/App/components/pickers/colorPicker/colorpicker.vue
index 759c8716..7c2c4f86 100644
--- a/zero.Web.UI/App/components/pickers/colorPicker/colorpicker.vue
+++ b/zero.Web.UI/App/components/pickers/colorPicker/colorpicker.vue
@@ -16,6 +16,8 @@
   export default {
     name: 'uiColorpicker',
 
+    emits: ['change', 'input'],
+
     props: {
       value: {
         type: String,
diff --git a/zero.Web.UI/App/components/pickers/countryPicker/countrypicker.vue b/zero.Web.UI/App/components/pickers/countryPicker/countrypicker.vue
index d5e4542c..2fe21265 100644
--- a/zero.Web.UI/App/components/pickers/countryPicker/countrypicker.vue
+++ b/zero.Web.UI/App/components/pickers/countryPicker/countrypicker.vue
@@ -12,6 +12,8 @@
   export default {
     name: 'uiCountrypicker',
 
+    emits: ['input'],
+
     props: {
       value: {
         type: [String, Array],
diff --git a/zero.Web.UI/App/components/pickers/datePicker/datepicker.vue b/zero.Web.UI/App/components/pickers/datePicker/datepicker.vue
index b7182192..177f28c9 100644
--- a/zero.Web.UI/App/components/pickers/datePicker/datepicker.vue
+++ b/zero.Web.UI/App/components/pickers/datePicker/datepicker.vue
@@ -23,6 +23,8 @@
   export default {
     name: 'uiDatepicker',
 
+    emits: ['change', 'input'],
+
     components: { DatepickerOverlay },
 
     props: {
diff --git a/zero.Web.UI/App/components/pickers/datePicker/overlay.vue b/zero.Web.UI/App/components/pickers/datePicker/overlay.vue
index 7ba204a3..ca1d4417 100644
--- a/zero.Web.UI/App/components/pickers/datePicker/overlay.vue
+++ b/zero.Web.UI/App/components/pickers/datePicker/overlay.vue
@@ -17,6 +17,8 @@
       }
     },
 
+    emits: ['change'],
+
     data: () => ({
       date: null,
       initialized: false
diff --git a/zero.Web.UI/App/components/pickers/dateRangePicker/daterangepicker.vue b/zero.Web.UI/App/components/pickers/dateRangePicker/daterangepicker.vue
index a1888960..b2946d93 100644
--- a/zero.Web.UI/App/components/pickers/dateRangePicker/daterangepicker.vue
+++ b/zero.Web.UI/App/components/pickers/dateRangePicker/daterangepicker.vue
@@ -32,6 +32,8 @@
   export default {
     name: 'uiDaterangepicker',
 
+    emits: ['change', 'input'],
+
     components: { DaterangepickerOverlay },
 
     props: {
diff --git a/zero.Web.UI/App/components/pickers/iconPicker/iconpicker.vue b/zero.Web.UI/App/components/pickers/iconPicker/iconpicker.vue
index 53b6c2ea..29715af2 100644
--- a/zero.Web.UI/App/components/pickers/iconPicker/iconpicker.vue
+++ b/zero.Web.UI/App/components/pickers/iconPicker/iconpicker.vue
@@ -16,6 +16,8 @@
   export default {
     name: 'uiIconpicker',
 
+    emits: ['change', 'input'],
+
     props: {
       value: {
         type: String,
diff --git a/zero.Web.UI/App/components/pickers/mediaPicker/mediapicker.vue b/zero.Web.UI/App/components/pickers/mediaPicker/mediapicker.vue
index e39ada65..ed8139d5 100644
--- a/zero.Web.UI/App/components/pickers/mediaPicker/mediapicker.vue
+++ b/zero.Web.UI/App/components/pickers/mediaPicker/mediapicker.vue
@@ -67,6 +67,8 @@
   export default {
     name: 'uiMediapicker',
 
+    emits: ['change', 'input'],
+
     props: {
       value: {
         type: [Array, String],
diff --git a/zero.Web.UI/App/components/pickers/pick.vue b/zero.Web.UI/App/components/pickers/pick.vue
index 3251f13a..8654f027 100644
--- a/zero.Web.UI/App/components/pickers/pick.vue
+++ b/zero.Web.UI/App/components/pickers/pick.vue
@@ -150,6 +150,8 @@
   export default {
     name: 'uiPick',
 
+    emits: ['change', 'input', 'select', 'deselect'],
+
     props: {
       value: {
         type: [String, Array],
diff --git a/zero.Web.UI/App/components/pickers/userPicker/userpicker.vue b/zero.Web.UI/App/components/pickers/userPicker/userpicker.vue
index 2cb11f54..11b45113 100644
--- a/zero.Web.UI/App/components/pickers/userPicker/userpicker.vue
+++ b/zero.Web.UI/App/components/pickers/userPicker/userpicker.vue
@@ -12,6 +12,8 @@
   export default {
     name: 'uiUserpicker',
 
+    emits: ['input'],
+
     props: {
       value: {
         type: [String, Array],
diff --git a/zero.Web.UI/App/components/globals.js b/zero.Web.UI/App/components/register.js
similarity index 82%
rename from zero.Web.UI/App/components/globals.js
rename to zero.Web.UI/App/components/register.js
index cbb13e49..6d53b7d5 100644
--- a/zero.Web.UI/App/components/globals.js
+++ b/zero.Web.UI/App/components/register.js
@@ -2,8 +2,7 @@
 // will be used very frequently. Components are registered using the
 // PascalCased version of their file name.
 
-import Vue from 'vue';
-
+let components = [];
 //const directories = ['buttons', 'forms', 'messages', 'tables', 'tabs'];
 
 // TODO this file will import all vue component files with subdirectories
@@ -42,6 +41,21 @@ requireComponent.keys().forEach((path) =>
     // Concatenated
     .join('');
 
-  // Globally register the component
-  Vue.component(componentName, componentConfig.default || componentConfig);
-});
\ No newline at end of file
+  if (componentName === 'uiOverlay')
+  {
+    return;
+  }
+
+  components.push({
+    name: componentName,
+    config: componentConfig.default || componentConfig
+  })
+});
+
+export default function (app)
+{
+  components.forEach(component =>
+  {
+    app.component(component.name, component.config);
+  });
+};
\ No newline at end of file
diff --git a/zero.Web.UI/App/components/tables/table-filter.vue b/zero.Web.UI/App/components/tables/table-filter.vue
index 1deaa6fe..adcf9221 100644
--- a/zero.Web.UI/App/components/tables/table-filter.vue
+++ b/zero.Web.UI/App/components/tables/table-filter.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="ui-table-filter">
-    <ui-search v-if="!hideSearch" v-model="value.search" class="onbg" />
+    <ui-search v-if="!hideSearch" v-model="config.search" class="onbg" />
     <ui-dropdown v-if="!hideFilter && filters.length" align="right">
       <template v-slot:button>
         <ui-button v-if="!hideFilter" type="light onbg" :label="filterLabel" caret="down" />
@@ -18,11 +18,11 @@
       </template>
       <slot name="actions"></slot>
     </ui-dropdown>
-    <ui-dropdown v-if="value.actions && value.actions.length > 0" align="right">
+    <ui-dropdown v-if="config.actions && config.actions.length > 0" align="right">
       <template v-slot:button>
         <ui-button type="light onbg" icon="fth-more-horizontal" />
       </template>
-      <ui-dropdown-button v-for="(action, index) in value.actions" :key="index" :value="action" :prevent="action.autoclose === false" :label="action.label" :icon="action.icon" @click="onActionClicked" />
+      <ui-dropdown-button v-for="(action, index) in config.actions" :key="index" :value="action" :prevent="action.autoclose === false" :label="action.label" :icon="action.icon" @click="onActionClicked" />
     </ui-dropdown>
   </div>
 </template>
@@ -37,8 +37,10 @@
   export default {
     name: 'uiTableFilter',
 
+    emits: ['filter'],
+
     props: {
-      value: {
+      config: {
         type: Object,
         required: true,
         default: () =>
@@ -62,7 +64,7 @@
     },
 
     watch: {
-      value: function (value)
+      config: function (value)
       {
         this.reload();
       }
@@ -100,9 +102,9 @@
 
       reload()
       {
-        this.hideFilter = typeof this.value.filter !== 'object';
-        this.hideSearch = typeof this.value.search === false;
-        this.hideSelection = this.value.selectable !== true;
+        this.hideFilter = typeof this.config.filter !== 'object';
+        this.hideSearch = typeof this.config.search === false;
+        this.hideSelection = this.config.selectable !== true;
         this.filters = JSON.parse(localStorage.getItem(this.storageKey) || "[]");
       },
 
@@ -125,7 +127,7 @@
       {
         let model = {
           name: null,
-          filter: this.value.filter.model
+          filter: this.config.filter.model
         };
 
         if (id)
@@ -137,9 +139,9 @@
           component: FilterOverlay,
           display: 'editor',
           title: 'Filter',
-          defaults: this.value.filter.model,
+          defaults: this.config.filter.model,
           model: model,
-          fields: this.value.filter.fields,
+          fields: this.config.filter.fields,
           canSave: !!this.alias,
           isCreate: !id
         }).then(value =>
diff --git a/zero.Web.UI/App/components/tables/table.vue b/zero.Web.UI/App/components/tables/table.vue
index 8c82d5fc..16324675 100644
--- a/zero.Web.UI/App/components/tables/table.vue
+++ b/zero.Web.UI/App/components/tables/table.vue
@@ -3,7 +3,7 @@
     <div class="ui-table" :class="{'is-inline': inline }">
       <header class="ui-table-row ui-table-head">      
         <div v-for="column in columns" :key="column.key" class="ui-table-cell" :table-field="column.field" :style="column.flex">
-          {{ column.label | localize }}
+          <span v-localize="column.label"></span>
           <button :disabled="!column.canSort" @click="sort(column)" type="button" class="ui-table-sort" :class="tableFilter.orderBy == column.field ? 'sort-' + (tableFilter.orderIsDescending ? 'desc' : 'asc') : null">
             <i class="arrow arrow-down"></i>
           </button>
@@ -70,8 +70,10 @@
   export default {
     name: 'uiTable',
 
+    emits: ['loaded', 'count', 'select'],
+
     props: {
-      value: {
+      config: {
         type: Object,
         required: true,
         default: () => { }
@@ -96,15 +98,15 @@
     components: { UiPagination },
 
     watch: {
-      'value.columns': function (val)
+      'config.columns': function (val)
       {
         this.generateColumns(val);
       },
-      'value.search': function (val)
+      'config.search': function (val)
       {
         this.tableFilter.search = val;
       },
-      'value.items': function (val)
+      'config.items': function (val)
       {
         this.initialize();
       },
@@ -183,7 +185,7 @@
       {
         this.debouncedUpdate = _debounce(this.update, 300);
 
-        this.configuration = _extend(JSON.parse(JSON.stringify(defaultConfig)), this.value);
+        this.configuration = _extend(JSON.parse(JSON.stringify(defaultConfig)), this.config);
 
         this.tableFilter.pageSize = this.configuration.pageSize;
 
diff --git a/zero.Web.UI/App/components/tabs/tabs.vue b/zero.Web.UI/App/components/tabs/tabs.vue
index 0c08b508..6eed4132 100644
--- a/zero.Web.UI/App/components/tabs/tabs.vue
+++ b/zero.Web.UI/App/components/tabs/tabs.vue
@@ -4,7 +4,7 @@
       <button type="button" v-for="(tab, index) in tabs" class="ui-tabs-list-item" :key="index" :class="{ 'is-active': tab.active, 'has-errors': tab.hasErrors }" :disabled="tab.disabled" 
               :aria-selected="tab.active" role="tab" @click="select(index)">
         <i v-if="tab.hasErrors" class="ui-tabs-list-item-error fth-alert-circle"></i>
-        {{ tab.label | localize }}
+        <span v-localize="tab.label"></span>
         <i v-if="tab.countOutput > 0" class="ui-tabs-list-item-count">{{tab.countOutput}}</i>
       </button>
     </div>
diff --git a/zero.Web.UI/App/components/tree/tree-item.vue b/zero.Web.UI/App/components/tree/tree-item.vue
index 2b8983bd..1179fea3 100644
--- a/zero.Web.UI/App/components/tree/tree-item.vue
+++ b/zero.Web.UI/App/components/tree/tree-item.vue
@@ -6,7 +6,7 @@
     <component :disabled="value.disabled" :is="tag" type="button" :to="value.url" class="ui-tree-item-link" @click="onClick(value, $event)">
       <i class="ui-tree-item-icon" :class="value.icon"></i>
       <i v-if="value.modifier" :title="value.modifier.name" class="ui-tree-item-modifier" :class="value.modifier.icon"></i>
-      <span class="ui-tree-item-text">{{value.name | localize}}</span>
+      <span class="ui-tree-item-text" v-localize="value.name"></span>
     </component>
     <ui-dot-button :disabled="value.disabled" class="ui-tree-item-actions" v-if="value.hasActions" @click="onActionsClicked(value, $event)" />
   </div>
@@ -19,6 +19,8 @@
   export default {
     name: 'uiTreeItem',
 
+    emits: ['click', 'open', 'rightclick', 'actions'],
+
     props: {
       value: {
         type: Object,
diff --git a/zero.Web.UI/App/components/tree/tree.vue b/zero.Web.UI/App/components/tree/tree.vue
index 6accfca6..df738fa5 100644
--- a/zero.Web.UI/App/components/tree/tree.vue
+++ b/zero.Web.UI/App/components/tree/tree.vue
@@ -27,6 +27,8 @@
   export default {
     name: 'uiTree',
 
+    emits: ['select', 'onStatusChange'],
+
     props: {
       depth: {
         type: Number,
@@ -65,7 +67,7 @@
     computed: {
       actionsDefined()
       {
-        return this.$scopedSlots.hasOwnProperty('actions');
+        return typeof this.$slots.actions === 'function';
       }
     },
 
diff --git a/zero.Web.UI/App/core/plugin.js b/zero.Web.UI/App/core/plugin.js
new file mode 100644
index 00000000..ff691fab
--- /dev/null
+++ b/zero.Web.UI/App/core/plugin.js
@@ -0,0 +1,56 @@
+
+class Plugin
+{
+  #name;
+  #onMounted;
+
+  routes = [];
+  renderers = {};
+
+
+  constructor(name)
+  {
+    this.#name = name;
+  }
+
+
+  get name()
+  {
+    return this.#name;
+  }
+
+  set mounted(callback)
+  {
+    this.#onMounted = callback;
+  }
+  
+
+  /*
+   * Add a new vue form renderer to the global configuration 
+   */
+  addRenderer(alias, renderer)
+  {
+    this.renderers[alias] = renderer;
+  }
+
+  /*
+   * Add a new route to vue-router 
+   */
+  addRoute(route)
+  {
+    this.routes.push(route);
+  }
+
+  /*
+   * Add a new route to vue-router 
+   */
+  addRoutes(routes)
+  {
+    routes.forEach(route =>
+    {
+      this.routes.push(route);
+    });
+  }
+};
+
+export default Plugin;
\ No newline at end of file
diff --git a/zero.Web.UI/App/directives/register.js b/zero.Web.UI/App/directives/register.js
index b8819233..a636392f 100644
--- a/zero.Web.UI/App/directives/register.js
+++ b/zero.Web.UI/App/directives/register.js
@@ -1,12 +1,4 @@
 
-//import Date from './date';
-//import Localize from './localize';
-//import Resizable from './resizable';
-//import Clickoutside from './clickoutside';
-//import Filesize from './filesize';
-//import Currency from './currency';
-//import Sortable from './sortable';
-
 export default function (app)
 {
   const requireComponent = require.context('.', true, /[\w-]+\.js/);
diff --git a/zero.Web.UI/App/editor/editor-component.vue b/zero.Web.UI/App/editor/editor-component.vue
index 9e3c94e7..ae47d1d4 100644
--- a/zero.Web.UI/App/editor/editor-component.vue
+++ b/zero.Web.UI/App/editor/editor-component.vue
@@ -16,6 +16,8 @@
   export default {
     name: 'uiEditorComponent',
 
+    emits: ['input'],
+
     props: {
       value: {
         type: [ Object, Array ]
diff --git a/zero.Web.UI/App/editor/editor.vue b/zero.Web.UI/App/editor/editor.vue
index 08a8c7e7..c5e9042e 100644
--- a/zero.Web.UI/App/editor/editor.vue
+++ b/zero.Web.UI/App/editor/editor.vue
@@ -63,6 +63,8 @@
   export default {
     name: 'uiEditor',
 
+    emits: ['input'],
+
     props: {
       config: {
         type: [ String, Object ],
diff --git a/zero.Web.UI/App/editor/fields/alias.vue b/zero.Web.UI/App/editor/fields/alias.vue
index 4849bf88..347c5312 100644
--- a/zero.Web.UI/App/editor/fields/alias.vue
+++ b/zero.Web.UI/App/editor/fields/alias.vue
@@ -5,6 +5,8 @@
 
 <script>
   export default {
+    emits: ['input'],
+
     props: {
       value: {
         type: String,
diff --git a/zero.Web.UI/App/editor/fields/amount.vue b/zero.Web.UI/App/editor/fields/amount.vue
index 4de742da..8570a25c 100644
--- a/zero.Web.UI/App/editor/fields/amount.vue
+++ b/zero.Web.UI/App/editor/fields/amount.vue
@@ -7,6 +7,8 @@
 
 <script>
   export default {
+    emits: ['input'],
+
     props: {
       value: {
         type: Number,
diff --git a/zero.Web.UI/App/editor/fields/checklist.vue b/zero.Web.UI/App/editor/fields/checklist.vue
index ea53274c..c104ff94 100644
--- a/zero.Web.UI/App/editor/fields/checklist.vue
+++ b/zero.Web.UI/App/editor/fields/checklist.vue
@@ -4,6 +4,8 @@
 
 <script>
   export default {
+    emits: ['input'],
+
     props: {
       value: {
         type: Array,
diff --git a/zero.Web.UI/App/editor/fields/colorpicker.vue b/zero.Web.UI/App/editor/fields/colorpicker.vue
index cc7f0e9b..dfba6d2f 100644
--- a/zero.Web.UI/App/editor/fields/colorpicker.vue
+++ b/zero.Web.UI/App/editor/fields/colorpicker.vue
@@ -5,6 +5,8 @@
 
 <script>
   export default {
+    emits: ['input'],
+
     props: {
       value: {
         type: String
diff --git a/zero.Web.UI/App/editor/fields/countrypicker.vue b/zero.Web.UI/App/editor/fields/countrypicker.vue
index 27a347e0..5f85b319 100644
--- a/zero.Web.UI/App/editor/fields/countrypicker.vue
+++ b/zero.Web.UI/App/editor/fields/countrypicker.vue
@@ -5,6 +5,8 @@
 
 <script>
   export default {
+    emits: ['input'],
+
     props: {
       value: {
         type: [String, Array]
diff --git a/zero.Web.UI/App/editor/fields/culture.vue b/zero.Web.UI/App/editor/fields/culture.vue
index f84ebb12..e87106b5 100644
--- a/zero.Web.UI/App/editor/fields/culture.vue
+++ b/zero.Web.UI/App/editor/fields/culture.vue
@@ -11,6 +11,8 @@
   import LanguagesApi from 'zero/resources/languages';
 
   export default {
+    emits: ['input'],
+
     props: {
       value: {
         type: String
diff --git a/zero.Web.UI/App/editor/fields/daterangepicker.vue b/zero.Web.UI/App/editor/fields/daterangepicker.vue
index 45e96ebe..cbc17b07 100644
--- a/zero.Web.UI/App/editor/fields/daterangepicker.vue
+++ b/zero.Web.UI/App/editor/fields/daterangepicker.vue
@@ -14,6 +14,8 @@
 
 <script>
   export default {
+    emits: ['input'],
+
     props: {
       value: {
         type: Object,
diff --git a/zero.Web.UI/App/editor/fields/iconPicker.vue b/zero.Web.UI/App/editor/fields/iconPicker.vue
index 12060d33..85137cb8 100644
--- a/zero.Web.UI/App/editor/fields/iconPicker.vue
+++ b/zero.Web.UI/App/editor/fields/iconPicker.vue
@@ -5,6 +5,8 @@
 
 <script>
   export default {
+    emits: ['input'],
+
     props: {
       value: {
         type: String
diff --git a/zero.Web.UI/App/editor/fields/inputlist.vue b/zero.Web.UI/App/editor/fields/inputlist.vue
index 09c01585..4696ce3b 100644
--- a/zero.Web.UI/App/editor/fields/inputlist.vue
+++ b/zero.Web.UI/App/editor/fields/inputlist.vue
@@ -4,6 +4,8 @@
 
 <script>
   export default {
+    emits: ['input'],
+
     props: {
       value: {
         type: Array,
diff --git a/zero.Web.UI/App/editor/fields/language.vue b/zero.Web.UI/App/editor/fields/language.vue
index 66c3cf9d..5adb094b 100644
--- a/zero.Web.UI/App/editor/fields/language.vue
+++ b/zero.Web.UI/App/editor/fields/language.vue
@@ -12,6 +12,8 @@
   import LanguagesApi from 'zero/resources/languages';
 
   export default {
+    emits: ['input'],
+
     props: {
       value: {
         type: String
diff --git a/zero.Web.UI/App/editor/fields/media.vue b/zero.Web.UI/App/editor/fields/media.vue
index a30d63e1..6c58f269 100644
--- a/zero.Web.UI/App/editor/fields/media.vue
+++ b/zero.Web.UI/App/editor/fields/media.vue
@@ -5,6 +5,8 @@
 
 <script>
   export default {
+    emits: ['input'],
+
     props: {
       value: {
         type: [String, Array],
diff --git a/zero.Web.UI/App/editor/fields/modules.vue b/zero.Web.UI/App/editor/fields/modules.vue
index cd963131..6d3ca289 100644
--- a/zero.Web.UI/App/editor/fields/modules.vue
+++ b/zero.Web.UI/App/editor/fields/modules.vue
@@ -5,6 +5,8 @@
 
 <script>
   export default {
+    emits: ['input'],
+
     props: {
       value: {
         type: [String, Object, Array]
diff --git a/zero.Web.UI/App/editor/fields/nested.vue b/zero.Web.UI/App/editor/fields/nested.vue
index 02996348..fee71986 100644
--- a/zero.Web.UI/App/editor/fields/nested.vue
+++ b/zero.Web.UI/App/editor/fields/nested.vue
@@ -19,6 +19,8 @@
 
     components: { UiEditor },
 
+    emits: ['input'],
+
     props: {
       value: {
         type: [Array, Object]
diff --git a/zero.Web.UI/App/editor/fields/number.vue b/zero.Web.UI/App/editor/fields/number.vue
index 231dd9a6..31980dac 100644
--- a/zero.Web.UI/App/editor/fields/number.vue
+++ b/zero.Web.UI/App/editor/fields/number.vue
@@ -5,6 +5,8 @@
 
 <script>
   export default {
+    emits: ['input'],
+
     props: {
       value: {
         type: Number,
diff --git a/zero.Web.UI/App/editor/fields/rte.vue b/zero.Web.UI/App/editor/fields/rte.vue
index 1c5dfa4f..b4607579 100644
--- a/zero.Web.UI/App/editor/fields/rte.vue
+++ b/zero.Web.UI/App/editor/fields/rte.vue
@@ -5,6 +5,8 @@
 
 <script>
   export default {
+    emits: ['input'],
+
     props: {
       value: {
         type: String,
diff --git a/zero.Web.UI/App/editor/fields/select.vue b/zero.Web.UI/App/editor/fields/select.vue
index ef1c0cb5..2c7c40e7 100644
--- a/zero.Web.UI/App/editor/fields/select.vue
+++ b/zero.Web.UI/App/editor/fields/select.vue
@@ -13,6 +13,8 @@
   export default {
     name: 'uiSelect',
 
+    emits: ['input'],
+
     props: {
       value: {
         type: [String, Number, Object],
diff --git a/zero.Web.UI/App/editor/fields/state.vue b/zero.Web.UI/App/editor/fields/state.vue
index bd838de1..76c794c1 100644
--- a/zero.Web.UI/App/editor/fields/state.vue
+++ b/zero.Web.UI/App/editor/fields/state.vue
@@ -5,6 +5,8 @@
 
 <script>
   export default {
+    emits: ['input'],
+
     props: {
       value: {
         type: [ String, Number ]
diff --git a/zero.Web.UI/App/editor/fields/tags.vue b/zero.Web.UI/App/editor/fields/tags.vue
index 33fc248e..d138fe0e 100644
--- a/zero.Web.UI/App/editor/fields/tags.vue
+++ b/zero.Web.UI/App/editor/fields/tags.vue
@@ -4,6 +4,8 @@
 
 <script>
   export default {
+    emits: ['input'],
+
     props: {
       value: {
         type: Array,
diff --git a/zero.Web.UI/App/editor/fields/text.vue b/zero.Web.UI/App/editor/fields/text.vue
index 9e186990..77da9eaa 100644
--- a/zero.Web.UI/App/editor/fields/text.vue
+++ b/zero.Web.UI/App/editor/fields/text.vue
@@ -7,6 +7,8 @@
 
 <script>
   export default {
+    emits: ['input'],
+
     props: {
       value: {
         type: String,
diff --git a/zero.Web.UI/App/editor/fields/textarea.vue b/zero.Web.UI/App/editor/fields/textarea.vue
index ef253571..34b06712 100644
--- a/zero.Web.UI/App/editor/fields/textarea.vue
+++ b/zero.Web.UI/App/editor/fields/textarea.vue
@@ -5,6 +5,8 @@
 
 <script>
   export default {
+    emits: ['input'],
+
     props: {
       value: {
         type: String
diff --git a/zero.Web.UI/App/editor/fields/toggle.vue b/zero.Web.UI/App/editor/fields/toggle.vue
index d9322a05..a3cc22cf 100644
--- a/zero.Web.UI/App/editor/fields/toggle.vue
+++ b/zero.Web.UI/App/editor/fields/toggle.vue
@@ -5,6 +5,8 @@
 
 <script>
   export default {
+    emits: ['input'],
+
     props: {
       value: {
         type: Boolean,
diff --git a/zero.Web.UI/App/filters/globals.js b/zero.Web.UI/App/filters/globals.js
deleted file mode 100644
index 451ead79..00000000
--- a/zero.Web.UI/App/filters/globals.js
+++ /dev/null
@@ -1,2 +0,0 @@
-
-import './localize';
\ No newline at end of file
diff --git a/zero.Web.UI/App/filters/localize.js b/zero.Web.UI/App/filters/localize.js
deleted file mode 100644
index 65f2b611..00000000
--- a/zero.Web.UI/App/filters/localize.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import Vue from 'vue';
-import Localization from 'zero/services/localization';
-
-/// <summary>
-/// Localizes the given property and sets the inner-text of the node to its result
-/// </summary>
-Vue.filter('localize', (value, options) =>
-{
-  return Localization.localize(value, options);
-}); 
\ No newline at end of file
diff --git a/zero.Web.UI/App/navigation.vue b/zero.Web.UI/App/navigation.vue
index 1eb729df..bf8eddbc 100644
--- a/zero.Web.UI/App/navigation.vue
+++ b/zero.Web.UI/App/navigation.vue
@@ -19,14 +19,12 @@
       <template v-for="section in sections">
         <router-link :to="section.url" class="app-nav-item" :alias="section.alias" :class="{ 'has-children': hasChildren(section) }">
           <i class="app-nav-item-icon" :class="section.icon"></i>
-          {{section.name | localize}}
+          <span v-localize="section.name"></span>
           <i v-if="hasChildren(section)" class="app-nav-item-arrow fth-chevron-down"></i>
         </router-link>
         <transition name="app-nav-children">
           <div class="app-nav-children" v-if="hasChildren(section) && $route.path.indexOf('/' + section.alias) === 0">
-            <router-link v-for="child in section.children" v-bind:key="child.alias" :to="child.url" class="app-nav-child">
-              {{child.name | localize}}
-            </router-link>
+            <router-link v-for="child in section.children" v-bind:key="child.alias" :to="child.url" class="app-nav-child" v-localize="child.name" />
           </div>
         </transition>
       </template>
diff --git a/zero.Web.UI/App/pages/login/login.vue b/zero.Web.UI/App/pages/login/login.vue
index 41e66e68..4381b2ad 100644
--- a/zero.Web.UI/App/pages/login/login.vue
+++ b/zero.Web.UI/App/pages/login/login.vue
@@ -52,7 +52,7 @@
       onSubmit(form)
       {
         this.rejectReason = null;
-
+        console.info(form);
         form.handle(AuthApi.login(this.model)).then(res =>
         {
           window.location.reload();
diff --git a/zero.Web.UI/App/pages/media/upload.vue b/zero.Web.UI/App/pages/media/upload.vue
index 3fbbb228..ca293f91 100644
--- a/zero.Web.UI/App/pages/media/upload.vue
+++ b/zero.Web.UI/App/pages/media/upload.vue
@@ -44,6 +44,8 @@
       disabled: Boolean
     },
 
+    emits: ['input'],
+
     data: () => ({
       icons: {
         image: 'fth-image',
diff --git a/zero.Web.UI/App/pages/notfound.vue b/zero.Web.UI/App/pages/notfound.vue
index 4f3c3472..ae61dfa2 100644
--- a/zero.Web.UI/App/pages/notfound.vue
+++ b/zero.Web.UI/App/pages/notfound.vue
@@ -8,19 +8,23 @@
       <code>{{path}}</code>
     </p>
     <ui-button class="page-error-button" type="light onbg" :label="detailsText" @click="details = !details" />
-    <template v-if="details">
+    <div v-if="details">
       <br><br>
       <div class="page-error-routes">
-        <span>#</span>
-        <span>Name</span>
-        <span>Path</span>
-        <template v-for="(route, index) in routes">
-          <span>{{index + 1}}.</span>
-          <b>{{route.name}}</b>
-          <span>{{route.path}}</span>
-        </template>
+        <header class="page-error-route is-head">
+          <span>#</span>
+          <b>Name</b>
+          <span>Path</span>
+        </header>
+        <div>
+          <div class="page-error-route" v-for="(route, index) in routes">
+            <span>{{index + 1}}.</span>
+            <b>{{route.name}}</b>
+            <span>{{route.path}}</span>
+          </div>
+        </div>
       </div>
-    </template>
+    </div>
   </div>
 </template>
 
@@ -57,10 +61,10 @@
 
       rebuild()
       {
-        this.path = this.$router.options.base + this.$route.path.substring(1);
+        this.path = this.$router.options.history.base + this.$route.path;
         this.routes = [];
 
-        this.$router.options.routes.forEach(route =>
+        this.$router.getRoutes().forEach(route =>
         {
           this.routes.push({
             path: route.path,
@@ -128,9 +132,8 @@
   }
 
   .page-error-routes
-  {
-    display: grid;
-    grid-template-columns: auto auto 1fr;
+  {   
+    display: block;
     width: 100%;
     max-width: 100%;
     text-align: left;
@@ -153,4 +156,10 @@
       }
     }
   }
+
+  .page-error-route
+  {
+    display: grid;
+    grid-template-columns: 1fr 3fr 6fr;
+  }
 </style>
\ No newline at end of file
diff --git a/zero.Web.UI/App/pages/pages/overlays/create.vue b/zero.Web.UI/App/pages/pages/overlays/create.vue
index 16a01f20..ad9b8782 100644
--- a/zero.Web.UI/App/pages/pages/overlays/create.vue
+++ b/zero.Web.UI/App/pages/pages/overlays/create.vue
@@ -8,7 +8,7 @@
       <button type="button" v-for="item in pageTypes" class="page-create-item" @click="onSelect(item)">
         <i class="page-create-item-icon" :class="item.icon"></i>
         <span class="page-create-item-text">
-          {{item.name | localize}}
+          <span v-localize="item.name"></span>
           <span v-if="item.description" v-localize="item.description"></span>
         </span>
       </button>     
diff --git a/zero.Web.UI/App/pages/settings/application-features.vue b/zero.Web.UI/App/pages/settings/application-features.vue
index b67558c4..4c011684 100644
--- a/zero.Web.UI/App/pages/settings/application-features.vue
+++ b/zero.Web.UI/App/pages/settings/application-features.vue
@@ -23,6 +23,7 @@
       },
     },
 
+    emits: ['input'],
 
     data: () => ({
       features: []
diff --git a/zero.Web.UI/App/pages/settings/applications-items.vue b/zero.Web.UI/App/pages/settings/applications-items.vue
index c2f09f8d..7f503c31 100644
--- a/zero.Web.UI/App/pages/settings/applications-items.vue
+++ b/zero.Web.UI/App/pages/settings/applications-items.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="apps-items">
-    <router-link v-for="app in value" :key="app.id" :to="getAppLink(app)" class="apps-item">
+    <router-link v-for="app in items" :key="app.id" :to="getAppLink(app)" class="apps-item">
       <strong class="apps-item-name">{{app.name}}</strong>
       <span class="apps-item-minor">{{app.domains[0]}}</span>
       <span class="apps-item-status" :class="{ 'is-active': app.isActive }" v-localize="getStatus(app)"></span>
@@ -17,7 +17,7 @@
 
   export default {
     props: {
-      value: {
+      items: {
         type: Array,
         default: () => []
       }
diff --git a/zero.Web.UI/App/pages/settings/applications.vue b/zero.Web.UI/App/pages/settings/applications.vue
index ababb95b..df389ee1 100644
--- a/zero.Web.UI/App/pages/settings/applications.vue
+++ b/zero.Web.UI/App/pages/settings/applications.vue
@@ -2,10 +2,10 @@
   <div class="apps">
     <ui-header-bar title="@application.list" :count="count" :back-button="true" />
     <div class="ui-blank-box">
-      <applications-items v-model="apps" />
+      <applications-items v-model:items="apps" />
     </div>
   </div>
-</template>
+</template> 
 
 
 <script>
diff --git a/zero.Web.UI/App/pages/settings/settings.vue b/zero.Web.UI/App/pages/settings/settings.vue
index c155da62..42863f25 100644
--- a/zero.Web.UI/App/pages/settings/settings.vue
+++ b/zero.Web.UI/App/pages/settings/settings.vue
@@ -13,7 +13,7 @@
             <strong v-localize="item.name"></strong>
             <template v-if="item.description">
               <br>
-              {{item.description | localize({ tokens: tokens })}}
+              <span v-localize="{ key: item.description, tokens: tokens }"></span>
             </template>
           </p>
         </router-link>
diff --git a/zero.Web.UI/App/plugin.js b/zero.Web.UI/App/plugin.js
new file mode 100644
index 00000000..7d95193f
--- /dev/null
+++ b/zero.Web.UI/App/plugin.js
@@ -0,0 +1,11 @@
+import Plugin from 'zero/core/plugin';
+
+
+let plugin = new Plugin('zero');
+
+plugin.mounted = () =>
+{
+  console.info(this.name + ' mounted');
+};
+
+export default plugin;
\ No newline at end of file
diff --git a/zero.Web.UI/App/renderers/globals.js b/zero.Web.UI/App/renderers/globals.js
deleted file mode 100644
index 691a21d1..00000000
--- a/zero.Web.UI/App/renderers/globals.js
+++ /dev/null
@@ -1,44 +0,0 @@
-
-zero.renderers = zero.renderers || {};
-
-// https://webpack.js.org/guides/dependency-management/#require-context
-const requireComponent = require.context(
-  // Look for files in the current directory
-  '.',
-  // Do look in subdirectories
-  true,
-  // .js files
-  /[\w-]+\.js/
-);
-
-// For each matching file name...
-requireComponent.keys().forEach((path) =>
-{
-  let pathParts = path.split('/');
-  let fileName = pathParts[pathParts.length - 1];
-
-  if (fileName === 'globals.js')
-  {
-    return;
-  }
-
-  const componentConfig = requireComponent(path);
-  const alias = componentConfig.default.alias;
-
-  zero.renderers[alias] = componentConfig.default;
-});
-
-// load renderers from plugins 
-// TODO use correct paths for sure
-//const pluginrenderers = require.context('@/../zero.commerce/plugin', true, /renderers\.js$/);
-
-//// for each matching file name...
-//pluginrenderers.keys().foreach((path) =>
-//{
-//  let pathparts = path.split('/');
-
-//  const componentconfig = pluginrenderers(path);
-//  const alias = componentconfig.default.alias;
-
-//  zero.renderers[alias] = componentconfig.default;
-//});
diff --git a/zero.Web.UI/App/renderers/register.js b/zero.Web.UI/App/renderers/register.js
new file mode 100644
index 00000000..81f1ea17
--- /dev/null
+++ b/zero.Web.UI/App/renderers/register.js
@@ -0,0 +1,24 @@
+
+zero.renderers = zero.renderers || {};
+
+export default function (app)
+{
+  const requireComponent = require.context('.', true, /[\w-]+\.js/);
+
+  requireComponent.keys().forEach(path =>
+  {
+    let pathParts = path.split('/');
+    let fileName = pathParts[pathParts.length - 1].split('.')[0];
+
+    if (fileName === 'register')
+    {
+      return;
+    }
+
+    const componentConfig = requireComponent(path);
+    const config = componentConfig.default || componentConfig;
+    const alias = config.alias;
+
+    zero.renderers[alias] = config;
+  });
+};
\ No newline at end of file
diff --git a/zero.Web.UI/App/router.config.js b/zero.Web.UI/App/router.config.js
index f445b143..c7ce0b00 100644
--- a/zero.Web.UI/App/router.config.js
+++ b/zero.Web.UI/App/router.config.js
@@ -123,27 +123,9 @@ routes.push({ name: '404', path: '/:pathMatch(.*)*', component: () => import('ze
 
 
 
-
-// create the router with history mode
-
-const router = createRouter({
-  history: createWebHistory(),
-  routes: routes,
-  base: zero.path,
-  linkActiveClass: 'is-active',
-  linkExactActiveClass: 'is-active-exact',
-  scrollBehavior(to, from, savedPosition)
-  {
-    return savedPosition ? savedPosition : { x: 0, y: 0 };
-  }
-});
-
-
-
-
 // set meta title before routing
 
-router.beforeEach((to, from, next) =>
+const beforeEach = (to, from, next) =>
 {
   let isGuarded = false;
 
@@ -201,7 +183,19 @@ router.beforeEach((to, from, next) =>
   {
     callback();
   }
-});
+};
 
 
-export default router;
\ No newline at end of file
+
+// create the router with history mode
+export default createRouter({
+  history: createWebHistory(zero.path),
+  routes: routes,
+  linkActiveClass: 'is-active',
+  linkExactActiveClass: 'is-active-exact',
+  beforeEach: beforeEach,
+  scrollBehavior(to, from, savedPosition)
+  {
+    return savedPosition ? savedPosition : { x: 0, y: 0 };
+  }
+});
\ No newline at end of file
diff --git a/zero.Web.UI/App/services/eventhub.js b/zero.Web.UI/App/services/eventhub.js
index 515f3442..0a2b01d0 100644
--- a/zero.Web.UI/App/services/eventhub.js
+++ b/zero.Web.UI/App/services/eventhub.js
@@ -1,5 +1,47 @@
-import mitt from 'mitt';
 
-const emitter = mitt();
+let handlers = new Map();
 
-export default emitter;
\ No newline at end of file
+/*
+ * Adds a new handler for an event of a specfic type
+ */
+const on = (type, handler) =>
+{
+  const typeHandlers = handlers.get(type);
+  const added = typeHandlers && typeHandlers.push(handler);
+
+  if (!added)
+  {
+    handlers.set(type, [handler]);
+  }
+};
+
+
+/*
+ * Removes a specifc event handler 
+ */
+const off = (type, handler) =>
+{
+  const typeHandlers = handlers.get(type);
+
+  if (typeHandlers)
+  {
+    typeHandlers.splice(typeHandlers.indexOf(handler) >>> 0, 1);
+  }
+};
+
+
+/*
+ * Adds a new handler for an event of a specfic type
+ */
+const emit = (type, event) =>
+{
+  (handlers.get(type) || []).slice().map(handler => handler(event));
+  (handlers.get('*') || []).slice().map(handler => handler(type, event));
+};
+
+
+export default {
+  on,
+  off,
+  emit
+};
\ No newline at end of file
diff --git a/zero.Web.UI/App/services/notification.js b/zero.Web.UI/App/services/notification.js
index 656d6c64..b86af324 100644
--- a/zero.Web.UI/App/services/notification.js
+++ b/zero.Web.UI/App/services/notification.js
@@ -1,86 +1,83 @@
-import Vue from 'vue';
 import Strings from 'zero/services/strings';
 import { find as _find, extend as _extend } from 'underscore';
 
-export default new Vue({
+let instances = [];
 
-  data: () => ({
-    instances: []
-  }),
-
-  methods: {
-
-    success(label, text, options)
-    {
-      this.show(_extend({
-        type: 'success',
-        label: label,
-        text: text
-      }, options || {}));
-    },
+const success = (label, text, options) =>
+{
+  show(_extend({
+    type: 'success',
+    label: label,
+    text: text
+  }, options || {}));
+};
 
 
-    error(label, text, options)
-    {
-      this.show(_extend({
-        type: 'error',
-        label: label,
-        text: text
-      }, options || {}));
-    },
+const error = (label, text, options) =>
+{
+  show(_extend({
+    type: 'error',
+    label: label,
+    text: text
+  }, options || {}));
+};
 
 
-    show(options, text)
-    {
-      let me = this;
-
-      if (typeof options === 'string')
-      {
-        options = {
-          label: options,
-          text: text
-        };
-      }
-
-      options = _extend({
-        id: Strings.guid(),
-        type: 'default',
-        label: null,
-        text: null,
-        persistent: false,
-        duration: 3000,
-        timeout: null,
-        close: () =>
-        {
-          clearTimeout(options.timeout);
-          me.close(this.instances.indexOf(options));
-        }
-      }, options);
-
-      if (!options.label && !options.text)
-      {
-        return;
-      }
-
-      options.timeout = setTimeout(() =>
-      {
-        options.close();
-      }, options.duration);
-
-      this.instances.push(options);
-    },
-
-
-    close(index)
-    {
-      if (index > -1)
-      {
-        this.instances.splice(index, 1);
-      }
-      else
-      {
-        this.instances = [];
-      }
-    }
+const show = (options, text) =>
+{
+  if (typeof options === 'string')
+  {
+    options = {
+      label: options,
+      text: text
+    };
   }
-});
\ No newline at end of file
+
+  options = _extend({
+    id: Strings.guid(),
+    type: 'default',
+    label: null,
+    text: null,
+    persistent: false,
+    duration: 3000,
+    timeout: null,
+    close: () =>
+    {
+      clearTimeout(options.timeout);
+      close(instances.indexOf(options));
+    }
+  }, options);
+
+  if (!options.label && !options.text)
+  {
+    return;
+  }
+
+  options.timeout = setTimeout(() =>
+  {
+    options.close();
+  }, options.duration);
+
+  instances.push(options);
+};
+
+
+const close = index =>
+{
+  if (index > -1)
+  {
+    instances.splice(index, 1);
+  }
+  else
+  {
+    instances = [];
+  }
+};
+
+
+export default {
+  success,
+  error,
+  show,
+  close
+};
\ No newline at end of file
diff --git a/zero.Web.UI/App/services/overlay.js b/zero.Web.UI/App/services/overlay.js
index 09a96e28..44b950ec 100644
--- a/zero.Web.UI/App/services/overlay.js
+++ b/zero.Web.UI/App/services/overlay.js
@@ -1,134 +1,128 @@
-import { createApp } from 'vue';
 import AppConfirm from 'zero/components/overlays/confirm';
 import Strings from 'zero/services/strings';
+import EventHub from 'zero/services/eventhub';
 import { find as _find, extend as _extend } from 'underscore';
 
-export default createApp({
-
-  data: () => ({
-    dropdownInstance: null,
-    instances: []
-  }),
-
-  methods: {
-
-    // sets a new active dropdown so the old one gets auto-closed
-    setDropdown(instance)
-    {
-      if (this.dropdownInstance != null)
-      {
-        this.dropdownInstance.hide();
-      }
-
-      this.dropdownInstance = instance;
-    },
-
-    // open a deletion confirm dialog with the given options
-    confirmDelete(title, text)
-    {
-      let options = _extend({
-        title: typeof title === 'string' ? title : '@deleteoverlay.title',
-        text: text || '@deleteoverlay.text',
-        confirmLabel: '@deleteoverlay.confirm',
-        confirmType: 'danger',
-        closeLabel: '@deleteoverlay.close',
-        component: AppConfirm,
-        autoclose: false,
-        softdismiss: false
-      }, typeof title === 'object' ? title : {});
-
-      return this.open(options);
-    },
-
-    // open a confirm dialog with the given options
-    confirm(title, text)
-    {
-      let options = _extend({
-        title: title,
-        text: text,
-        component: AppConfirm,
-        autoclose: true,
-        softdismiss: false
-      }, typeof title === 'object' ? title : {});
-
-      return this.open(options);
-    },
-
-
-    // opens an overlay
-    open(options)
-    {
-      const defaultWidth = options.display === 'editor' ? 560 : 460;
-
-      options = _extend({
-        id: Strings.guid(),
-        display: 'dialog',
-        width: defaultWidth,
-        hide: this.close,
-        autoclose: true,
-        softdismiss: options.display !== 'editor',
-        closeLabel: '@ui.close',
-        confirmLabel: '@ui.confirm',
-        confirmType: 'default'
-      }, options);
-
-      options.theme = 'default';
-
-      this.instances.push(options);
-
-      return new Promise((resolve, reject) =>
-      {
-        options.close = () =>
-        {
-          this.close(options);
-          reject(options);
-        };
-        options.confirm = data =>
-        {
-          if (options.autoclose)
-          {
-            this.close(options);
-          }
-          resolve(data, options);
-        };
-      });
-    },
-
-
-    // closes an overlay
-    close(instance)
-    {
-      if (this.instances.length < 1)
-      {
-        return;
-      }
-
-      if (!instance)
-      {
-        this.instances.pop();
-        return;
-      }
-
-      if (typeof instance === 'string')
-      {
-        instance = _find(this.instances, item => item.id === instance);
-      }
-
-      if (instance)
-      {
-        const index = this.instances.indexOf(instance);
-        this.instances.splice(index, 1);
-      }
-    },
-
-    // closes all overlays
-    closeAll()
-    {
-      this.instances.forEach(instance =>
-      {
-
-      });
-    }
+let currentInstance = null;
+let instances = [];
 
+// sets a new active dropdown so the old one gets auto-closed
+const setDropdown = instance =>
+{
+  if (currentInstance != null)
+  {
+    currentInstance.hide();
   }
-});
\ No newline at end of file
+
+  currentInstance = instance;
+};
+
+// open a deletion confirm dialog with the given options
+const confirmDelete = (title, text) =>
+{
+  let options = _extend({
+    title: typeof title === 'string' ? title : '@deleteoverlay.title',
+    text: text || '@deleteoverlay.text',
+    confirmLabel: '@deleteoverlay.confirm',
+    confirmType: 'danger',
+    closeLabel: '@deleteoverlay.close',
+    component: AppConfirm,
+    autoclose: false,
+    softdismiss: false
+  }, typeof title === 'object' ? title : {});
+
+  return open(options);
+};
+
+// open a confirm dialog with the given options
+const confirm = (title, text) =>
+{
+  let options = _extend({
+    title: title,
+    text: text,
+    component: AppConfirm,
+    autoclose: true,
+    softdismiss: false
+  }, typeof title === 'object' ? title : {});
+
+  return open(options);
+};
+
+
+// opens an overlay
+const open = options =>
+{
+  const defaultWidth = options.display === 'editor' ? 560 : 460;
+
+  options = _extend({
+    id: Strings.guid(),
+    display: 'dialog',
+    width: defaultWidth,
+    hide: close,
+    autoclose: true,
+    softdismiss: options.display !== 'editor',
+    closeLabel: '@ui.close',
+    confirmLabel: '@ui.confirm',
+    confirmType: 'default'
+  }, options);
+
+  options.theme = 'default';
+
+  instances.push(options);
+  EventHub.emit('overlay:open', instances);
+
+  return new Promise((resolve, reject) =>
+  {
+    options.close = () =>
+    {
+      close(options);
+      reject(options);
+    };
+    options.confirm = data =>
+    {
+      if (options.autoclose)
+      {
+        close(options);
+      }
+      resolve(data, options);
+    };
+  });
+};
+
+
+// closes an overlay
+const close = instance =>
+{
+  if (instances.length < 1)
+  {
+    return;
+  }
+
+  if (!instance)
+  {
+    instances.pop();
+    EventHub.emit('overlay:close', instances);
+    return;
+  }
+
+  if (typeof instance === 'string')
+  {
+    instance = _find(instances, item => item.id === instance);
+  }
+
+  if (instance)
+  {
+    const index = instances.indexOf(instance);
+    instances.splice(index, 1);
+    EventHub.emit('overlay:close', instances);
+  }
+};
+
+
+export default {
+  setDropdown,
+  confirmDelete,
+  confirm,
+  open,
+  close
+};
\ No newline at end of file
diff --git a/zero.Web.UI/app.js b/zero.Web.UI/app.js
index be5426ba..ad89afd9 100644
--- a/zero.Web.UI/app.js
+++ b/zero.Web.UI/app.js
@@ -6,17 +6,20 @@ zero.apps = {
 };
 
 import Router from 'zero/router.config.js';
-//import 'zero/components/globals';
+import registerComponents from 'zero/components/register';
 import registerDirectives from 'zero/directives/register';
-//import 'zero/filters/globals';
-//import 'zero/renderers/globals';
-//import 'zero/pages/register';
+import registerRenderers from 'zero/renderers/register';
 
-//import 'zero/zero.plugins.js';
+import 'zero/zero.plugins.js';
+//import ZeroPlugin from 'zero/plugin.js';
 
 const app = createApp(App);
 app.use(Router);
-registerDirectives(app);
 
-console.info(app);
+registerDirectives(app);
+registerComponents(app);
+registerRenderers(app);
+
 app.mount('#app');
+
+//console.info(ZeroPlugin);
\ No newline at end of file
diff --git a/zero.Web.UI/package.json b/zero.Web.UI/package.json
index 31461203..19faa882 100644
--- a/zero.Web.UI/package.json
+++ b/zero.Web.UI/package.json
@@ -14,7 +14,6 @@
     "dayjs": "^1.8.26",
     "flatpickr": "^4.6.3",
     "lodash": "*",
-    "mitt": "^2.1.0",
     "sortablejs": "^1.10.2",
     "underscore": "^1.10.2",
     "vue": "3.0.0",