From e7ada02e1d467df86eaa008931bb6985a4527721 Mon Sep 17 00:00:00 2001
From: Tobias Klika <cee@live.at>
Date: Tue, 14 Dec 2021 14:21:48 +0100
Subject: [PATCH] first draft of ui-editor

---
 zero.Backoffice.UI/app/components/ui-tab.vue  |  6 ++-
 .../app/components/ui-table.vue               |  1 -
 zero.Backoffice.UI/app/core/zeroRuntime.ts    |  2 +
 .../app/editor/editor-component.vue           | 30 ++++++-----
 zero.Backoffice.UI/app/editor/editor.vue      | 23 ++++----
 .../app/editor/fields/toggle.vue              |  4 +-
 zero.Backoffice.UI/app/editor/index.ts        |  5 ++
 zero.Backoffice.UI/app/editor/register.ts     | 12 +++++
 .../app/forms/components/ui-toggle.vue        | 16 +++---
 .../app/forms/ui-form-header.vue              | 17 +++---
 zero.Backoffice.UI/app/forms/ui-form.vue      | 53 +++++--------------
 .../app/modules/countries/_page.vue           |  2 +-
 .../app/modules/countries/country.vue         | 20 +++----
 .../app/modules/countries/plugin.ts           |  3 +-
 zero.Backoffice.UI/package.json               |  7 +--
 zero.Backoffice.UI/vite.config.js             | 19 ++++---
 16 files changed, 111 insertions(+), 109 deletions(-)
 create mode 100644 zero.Backoffice.UI/app/editor/index.ts
 create mode 100644 zero.Backoffice.UI/app/editor/register.ts

diff --git a/zero.Backoffice.UI/app/components/ui-tab.vue b/zero.Backoffice.UI/app/components/ui-tab.vue
index da671a7a..09e6d724 100644
--- a/zero.Backoffice.UI/app/components/ui-tab.vue
+++ b/zero.Backoffice.UI/app/components/ui-tab.vue
@@ -1,5 +1,5 @@
 <template>
-  <section v-show="active" class="ui-tab" :aria-hidden="!active" role="tabpanel">
+  <section v-show="active && !hidden" class="ui-tab" :aria-hidden="!active" role="tabpanel">
     <slot />
   </section>
 </template>
@@ -22,6 +22,10 @@
       disabled: {
         type: Boolean,
         default: false
+      },
+      hidden: {
+        type: Boolean,
+        default: false
       }
     },
 
diff --git a/zero.Backoffice.UI/app/components/ui-table.vue b/zero.Backoffice.UI/app/components/ui-table.vue
index 363ba0bd..50264f64 100644
--- a/zero.Backoffice.UI/app/components/ui-table.vue
+++ b/zero.Backoffice.UI/app/components/ui-table.vue
@@ -232,7 +232,6 @@
 
       getLink(item)
       {
-        return '/'; // TODO
         if (!this.listConfig.link)
         {
           return null;
diff --git a/zero.Backoffice.UI/app/core/zeroRuntime.ts b/zero.Backoffice.UI/app/core/zeroRuntime.ts
index 5e83e218..566ebb0d 100644
--- a/zero.Backoffice.UI/app/core/zeroRuntime.ts
+++ b/zero.Backoffice.UI/app/core/zeroRuntime.ts
@@ -7,6 +7,7 @@ import { createRouter, RouteRecordRaw, RouterOptions } from 'vue-router';
 import registerDirectives from '../directives/register';
 import registerComponents from '../components/register';
 import registerFormComponents from '../forms/register';
+import registerEditorComponents from '../editor/register';
 import { getRouterConfig, appendRouterGuards } from './router/routerConfig';
 import { countryPlugin, applicationPlugin, settingsPlugin } from '../modules';
 import { ZeroSchema } from 'zero/schemas';
@@ -52,6 +53,7 @@ export class ZeroRuntime implements Zero
     registerDirectives(app);
     registerComponents(app);
     registerFormComponents(app);
+    registerEditorComponents(app);
   }
 
 
diff --git a/zero.Backoffice.UI/app/editor/editor-component.vue b/zero.Backoffice.UI/app/editor/editor-component.vue
index eff02f75..38133c41 100644
--- a/zero.Backoffice.UI/app/editor/editor-component.vue
+++ b/zero.Backoffice.UI/app/editor/editor-component.vue
@@ -12,7 +12,7 @@
                :can-unlock="canUnlock || false"
                @unlock="unlock"
                @lock="lock">
-    <component :is="config.component" v-bind="config.componentOptions" :model-value="model" :entity="modelValue" :meta="meta" @input="onChange" :disabled="isDisabled" />
+    <component :is="config.component" v-bind="config.componentOptions" :value="model" :entity="value" :meta="meta" @input="onChange" :disabled="isDisabled" />
     <p v-if="config.options.helpText" class="ui-property-help" v-localize="config.options.helpText"></p>
   </ui-property>
 </template>
@@ -38,7 +38,7 @@
         type: Object,
         required: true
       },
-      modelValue: {
+      value: {
         type: Object,
         required: true
       },
@@ -49,7 +49,7 @@
     },
 
     watch: {
-      modelValue: {
+      value: {
         deep: true,
         handler: function ()
         {
@@ -74,15 +74,15 @@
     computed: {
       isHidden()
       {
-        return this.loaded && typeof this.config.options.condition === 'function' && !this.config.options.condition(this.modelValue, this);
+        return this.loaded && typeof this.config.options.condition === 'function' && !this.config.options.condition(this.value, this);
       },
       isRequired()
       {
-        return typeof this.config.isRequired === 'function' ? this.config.isRequired(this.modelValue) : this.config.isRequired;
+        return typeof this.config.isRequired === 'function' ? this.config.isRequired(this.value) : this.config.isRequired;
       },
       isDisabled()
       {
-        return this.manualDisabled || this.disabled || (typeof this.config.options.disabled === 'boolean' && this.config.options.disabled) || (typeof this.config.options.disabled === 'function' && this.config.options.disabled(this.modelValue, this.model));
+        return this.manualDisabled || this.disabled || (typeof this.config.options.disabled === 'boolean' && this.config.options.disabled) || (typeof this.config.options.disabled === 'function' && this.config.options.disabled(this.value, this.model));
       },
       label()
       {
@@ -94,11 +94,11 @@
       },
       isLocked()
       {
-        return !this.editor.blueprint.unlocked(this.modelValue, this.config);
+        return this.editor.blueprint && !this.editor.blueprint.unlocked(this.value, this.config);
       },
       canUnlock()
       {
-        return this.editor.blueprint.canUnlock(this.modelValue, this.config);
+        return this.editor.blueprint && this.editor.blueprint.canUnlock(this.value, this.config);
       }
     },
 
@@ -107,7 +107,7 @@
       rebuildModel()
       {
         this.selector = selectorToArray(this.config.path);
-        let currentValue = this.modelValue;
+        let currentValue = this.value;
         let found = false;
 
         if (!this.selector || !this.selector.length || !currentValue)
@@ -132,6 +132,8 @@
 
           this.model = found ? currentValue : null;
         }
+
+        //console.info(this.config.path + ' => ' + this.model);
       },
 
 
@@ -141,19 +143,19 @@
 
         if (typeof value === 'function')
         {
-          value(this.modelValue);
+          value(this.value);
         }
         else
         {
-          setObjectValue(this.modelValue, this.selector, value);
+          setObjectValue(this.value, this.selector, value);
         }
-        this.$emit('input', this.modelValue);
+        this.$emit('input', this.value);
 
         if (typeof this.config.options.onChange === 'function')
         {
           this.config.options.onChange(value, {
             oldValue,
-            model: this.modelValue,
+            model: this.value,
             component: this
           });
         }
@@ -181,7 +183,7 @@
 
       async lock()
       {
-        let originalValue = await this.editor.blueprint.lock(this.modelValue, this.config);
+        let originalValue = await this.editor.blueprint.lock(this.value, this.config);
         this.onChange(originalValue);
       }
     }
diff --git a/zero.Backoffice.UI/app/editor/editor.vue b/zero.Backoffice.UI/app/editor/editor.vue
index 0963a1d9..f247d9ed 100644
--- a/zero.Backoffice.UI/app/editor/editor.vue
+++ b/zero.Backoffice.UI/app/editor/editor.vue
@@ -5,17 +5,17 @@
     </header>
     <div class="editor" :class="['display-' + display, { 'has-sidebar': asideDefined, 'hide-tabs': tabs.length < 2, 'has-below': belowDefined }]">
       <ui-tabs class="editor-tabs">
-        <ui-tab v-if="!tab.disabled(modelValue)" v-for="(tab, index) in tabs" class="ui-box" :class="tab.class" :label="tab.name" :count="tab.count(modelValue)" :key="index">
+        <ui-tab v-for="(tab, index) in tabs" class="ui-box" :class="tab.class" :label="tab.name" :count="tab.count(value)" :hidden="tab.disabled(value)" :key="index">
           <h3 v-if="display == 'boxes' && tab.name" class="ui-headline editor-tab-headline" v-localize="tab.name"></h3>
           <slot name="blueprint">
-            <blueprint-property v-if="modelValue && editorConfig.blueprint" :model-value="modelValue" :meta="meta" :config="editorConfig.blueprint" />
+            <!--<blueprint-property v-if="value && editorConfig.blueprint" :model-value="value" :meta="meta" :config="editorConfig.blueprint" />-->
           </slot>
           <div class="ui-property ui-property-parent" v-for="fieldset in tab.fieldsets">
-            <editor-component v-for="(field, fieldIndex) in fieldset.fields" :disabled="disabled" :key="fieldIndex" :config="field" @input="onChange" :editor="editorConfig" :model-value="modelValue"
+            <editor-component v-for="(field, fieldIndex) in fieldset.fields" :disabled="disabled" :key="fieldIndex" :config="field" @input="onChange" :editor="editorConfig" :value="value"
                               :class="field.options.class" :data-cols="!!field.options.fieldset" :style="{ 'grid-column': field.options.fieldset ? 'span ' + field.options.fieldsetColumns : null }" />
 
           </div>
-          <component v-if="tab.component" :is="tab.component" v-model="modelValue" />
+          <component v-if="tab.component" :is="tab.component" v-model="value" />
         </ui-tab>
       </ui-tabs>
       <aside class="editor-aside" v-if="asideDefined">
@@ -35,8 +35,9 @@
   import EditorAside from './editor-aside.vue';
   import { createBlueprintConfig } from './editor-blueprint';
   import BlueprintProperty from './blueprint/property.vue';
+  import { defineComponent } from 'vue';
 
-  export default {
+  export default defineComponent({
     name: 'uiEditor',
 
     provide: function ()
@@ -60,7 +61,7 @@
         type: Boolean,
         default: false
       },
-      modelValue: {
+      value: {
         type: Object
       },
       onConfigure: {
@@ -93,10 +94,10 @@
       }
     },
 
-    created()
+    async created()
     {
-      this.editorConfig = typeof this.config === 'string' ? this.zero.getEditor(this.config) : this.config;
-      this.editorConfig.blueprint = createBlueprintConfig(this.zero, this.editorConfig, this.modelValue);
+      this.editorConfig = typeof this.config === 'string' ? await this.zero.getSchema(this.config) : this.config;
+      this.editorConfig.blueprint = null; //createBlueprintConfig(this.zero, this.editorConfig, this.value);
 
       this.tabs = this.editorConfig.tabs.map(tab =>
       {
@@ -121,8 +122,8 @@
 
       onChange()
       {
-        this.$emit('input', this.modelValue);
+        this.$emit('input', this.value);
       }
     }
-  }
+  })
 </script>
\ No newline at end of file
diff --git a/zero.Backoffice.UI/app/editor/fields/toggle.vue b/zero.Backoffice.UI/app/editor/fields/toggle.vue
index 20ebea15..f714cd49 100644
--- a/zero.Backoffice.UI/app/editor/fields/toggle.vue
+++ b/zero.Backoffice.UI/app/editor/fields/toggle.vue
@@ -1,12 +1,12 @@
 <template>
-  <ui-toggle :model-value="modelValue" @input="$emit('input', $event)" v-bind="{ disabled, negative, onContent, offContent }" />
+  <ui-toggle :on="value" @update:on="$emit('input', $event)" v-bind="{ disabled, negative, onContent, offContent }" />
 </template>
 
 
 <script>
   export default {
     props: {
-      modelValue: Boolean,
+      value: Boolean,
       disabled: Boolean,
       negative: Boolean,
       onContent: String,
diff --git a/zero.Backoffice.UI/app/editor/index.ts b/zero.Backoffice.UI/app/editor/index.ts
new file mode 100644
index 00000000..baf77b54
--- /dev/null
+++ b/zero.Backoffice.UI/app/editor/index.ts
@@ -0,0 +1,5 @@
+import uiEditor from './editor.vue';
+
+export {
+  uiEditor
+};
\ No newline at end of file
diff --git a/zero.Backoffice.UI/app/editor/register.ts b/zero.Backoffice.UI/app/editor/register.ts
new file mode 100644
index 00000000..736b39d6
--- /dev/null
+++ b/zero.Backoffice.UI/app/editor/register.ts
@@ -0,0 +1,12 @@
+
+import { App } from 'vue';
+import * as components from './index';
+
+export default function (app: App)
+{
+  for (var key in components)
+  {
+    let component = components[key];
+    app.component(key, component.default || component);
+  }
+};
\ No newline at end of file
diff --git a/zero.Backoffice.UI/app/forms/components/ui-toggle.vue b/zero.Backoffice.UI/app/forms/components/ui-toggle.vue
index dd7bde04..b18a0d27 100644
--- a/zero.Backoffice.UI/app/forms/components/ui-toggle.vue
+++ b/zero.Backoffice.UI/app/forms/components/ui-toggle.vue
@@ -1,10 +1,10 @@
  <template>
-  <div class="ui-toggle" :class="{'is-disabled': disabled, 'is-negative': negative, 'is-active': modelValue, 'is-content-left': contentLeft }">
-    <input type="checkbox" :value="modelValue" @input="onChange" :disabled="disabled" />
-    <span class="ui-toggle-switch" :class="{ 'is-active': modelValue }"><i></i></span>
-    <i class="fth-minus-circle ui-toggle-off-warning" v-if="offContent && !modelValue && offWarning"></i>
-    <span class="ui-toggle-text" v-if="onContent && modelValue" v-localize="onContent"></span>
-    <span class="ui-toggle-text" v-if="offContent && !modelValue" v-localize="offContent"></span>
+  <div class="ui-toggle" :class="{'is-disabled': disabled, 'is-negative': negative, 'is-active': on, 'is-content-left': contentLeft }">
+    <input type="checkbox" :value="on" @input="onChange" :disabled="disabled" />
+    <span class="ui-toggle-switch" :class="{ 'is-active': on }"><i></i></span>
+    <i class="fth-minus-circle ui-toggle-off-warning" v-if="offContent && !on && offWarning"></i>
+    <span class="ui-toggle-text" v-if="onContent && on" v-localize="onContent"></span>
+    <span class="ui-toggle-text" v-if="offContent && !on" v-localize="offContent"></span>
   </div>
 </template>
 
@@ -14,7 +14,7 @@
     name: 'uiToggle',
 
     props: {
-      modelValue: {
+      on: {
         type: Boolean,
         default: false
       },
@@ -48,7 +48,7 @@
 
       onChange(ev)
       {
-        this.$emit('update:modelValue', !this.modelValue);
+        this.$emit('update:on', !this.on);
       }
     }
   }
diff --git a/zero.Backoffice.UI/app/forms/ui-form-header.vue b/zero.Backoffice.UI/app/forms/ui-form-header.vue
index 6931f926..084dbf90 100644
--- a/zero.Backoffice.UI/app/forms/ui-form-header.vue
+++ b/zero.Backoffice.UI/app/forms/ui-form-header.vue
@@ -1,21 +1,21 @@
 <template>
   <ui-header-bar class="ui-form-header" :back-button="true">
     <template v-slot:title>
-      <h2 class="ui-header-bar-title" :class="{'is-empty': title && !modelValue.name && !titleDisabled}">
+      <h2 class="ui-header-bar-title" :class="{'is-empty': title && !value.name && !titleDisabled}">
         <template v-for="prefix in prefixes">
           <span class="-minor -prefix" v-localize:html="prefix"></span>
           <ui-icon class="-chevron" symbol="fth-chevron-right" :size="14" />
         </template>
         <ui-error field="name" />
-        <input v-if="!titleDisabled" class="ui-form-header-title-input" type="text" v-model="modelValue.name" v-localize:placeholder="title" :readonly="titleDisabled || disabled" />
-        <!--<ui-alias class="ui-form-header-title-alias" v-if="hasAlias" v-model="modelValue.alias" :name="modelValue.name" :disabled="disabled" />-->
-        <span v-if="titleDisabled" v-localize="forceTitle ? title : (modelValue.name || title)"></span>
+        <input v-if="!titleDisabled" class="ui-form-header-title-input" type="text" v-model="value.name" v-localize:placeholder="title" :readonly="titleDisabled || disabled" />
+        <!--<ui-alias class="ui-form-header-title-alias" v-if="hasAlias" v-model="value.alias" :name="value.name" :disabled="disabled" />-->
+        <span v-if="titleDisabled" v-localize="forceTitle ? title : (value.name || title)"></span>
       </h2>
     </template>
     <div class="ui-form-header-aside">
       <slot></slot>
-      <div v-if="!activeDisabled && typeof modelValue.isActive !== 'undefined'" class="ui-form-header-toggle">
-        <ui-toggle v-model="modelValue.isActive" class="is-accent" off-content="@ui.inactive" :off-warning="true" on-content="@ui.active" :content-left="true" :disabled="disabled" />
+      <div v-if="!activeDisabled && typeof value.isActive !== 'undefined'" class="ui-form-header-toggle">
+        <ui-toggle v-model:on="value.isActive" class="is-accent" off-content="@ui.inactive" :off-warning="true" on-content="@ui.active" :content-left="true" :disabled="disabled" />
       </div>
       <slot name="buttons"></slot>
       <ui-dropdown v-if="actionsDefined" align="right">
@@ -47,8 +47,9 @@
       prefix: {
         type: [String, Array]
       },
-      modelValue: {
-        type: Object
+      value: {
+        type: Object,
+        default: {}
       },
       canDelete: {
         type: Boolean,
diff --git a/zero.Backoffice.UI/app/forms/ui-form.vue b/zero.Backoffice.UI/app/forms/ui-form.vue
index 12e26307..4ae04e4e 100644
--- a/zero.Backoffice.UI/app/forms/ui-form.vue
+++ b/zero.Backoffice.UI/app/forms/ui-form.vue
@@ -104,52 +104,25 @@
       },
 
       // loads data on creation of the form
-      load(promise)
+      async load(promise)
       {
         this.loadingState = 'loading';
+        const response = await promise();
 
-        return new Promise((resolve, reject) =>
+        if (!response.success)
         {
-          promise
-            .then(
-              response =>
-              {
-                if (response.meta && typeof response.meta.canEdit === 'boolean')
-                {
-                  this.canEdit = response.meta.canEdit;
+          this.loadingState = 'error';
+          this.loadingError = response.errors[0].message;
+          return null;
+        }
 
-                  //if (response.entity)
-                  //{
-                  //  if (!response.entity.id && this.$route.params.scope === zero.sharedAppId)
-                  //  {
-                  //    response.entity.appId = zero.sharedAppId;
-                  //  }
-
-                  //  this.isShared = response.entity.appId === zero.sharedAppId;
-                  //} // TODO appx
-                }
-
-                resolve(response);
-
-                this.loadingState = 'default';
-                this.$nextTick(() =>
-                {
-                  this.$emit('loaded', this);
-                });
-              },
-              (error) =>
-              {
-                this.loadingState = 'error';
-                this.loadingError = error;
-                reject(error);
-              }
-            )
-            .catch(exception =>
-            {
-              this.loadingState = 'error';
-              this.loadingError = exception;
-            });
+        this.canEdit = true;
+        this.loadingState = 'default';
+        this.$nextTick(() =>
+        {
+          this.$emit('loaded', this);
         });
+        return response.data;
       },
 
       // handles a promise as result of the form submission
diff --git a/zero.Backoffice.UI/app/modules/countries/_page.vue b/zero.Backoffice.UI/app/modules/countries/_page.vue
index 69bb8912..939bcf79 100644
--- a/zero.Backoffice.UI/app/modules/countries/_page.vue
+++ b/zero.Backoffice.UI/app/modules/countries/_page.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="root">
-    countries óÒ<br />
+    country óÒ<br />
     <ui-search v-model="search" @submit="doSearch" />
     <div v-for="item in items" :key="item.id">
       {{item.name}}
diff --git a/zero.Backoffice.UI/app/modules/countries/country.vue b/zero.Backoffice.UI/app/modules/countries/country.vue
index cccb6b8e..2a840d9d 100644
--- a/zero.Backoffice.UI/app/modules/countries/country.vue
+++ b/zero.Backoffice.UI/app/modules/countries/country.vue
@@ -1,6 +1,6 @@
 <template>
   <ui-form ref="form" class="country" v-slot="form" @submit="onSubmit" @load="onLoad" :route="route">
-    <ui-form-header v-model="model" prefix="@country.list" title="@country.name" :disabled="disabled" :is-create="!$route.params.id" :state="form.state" :can-delete="meta.canDelete" @delete="onDelete" />
+    <ui-form-header v-model:value="model" prefix="@country.list" title="@country.name" :disabled="disabled" :is-create="!$route.params.id" :state="form.state" :can-delete="meta.canDelete" @delete="onDelete" />
     <ui-editor config="country" v-model="model" :meta="meta" :disabled="disabled">
       <template v-slot:below>
         <ui-editor-infos v-model="model" :disabled="disabled" />
@@ -15,7 +15,7 @@
 
 
 <script>
-  import { countriesApi } from 'zerox';
+  import api from './api';
 
   export default {
     props: ['id'],
@@ -23,33 +23,29 @@
     data: () => ({
       meta: {},
       model: { name: null, features: [], domains: [] },
-      route: __zero.alias.settings.countries + '-edit',
+      route: 'countries-edit',
       disabled: false
     }),
 
     methods: {
 
-      onLoad(form)
+      async onLoad(form)
       {
-        form.load(!this.$route.params.id ? countriesApi.getEmpty() : countriesApi.getById(this.id, { scope: 'hallo' })).then(response =>
-        {
-          this.disabled = !response.meta.canEdit;
-          this.meta = response.meta;
-          this.model = response.entity;
-        });
+        const response = await form.load(() => api.getById(this.id));
+        this.model = response;
       },
 
 
       onSubmit(form)
       {
-        form.handle(countriesApi.save(this.model));
+        form.handle(api.save(this.model));
       },
 
 
       onDelete(item, opts)
       {
         opts.hide();
-        this.$refs.form.onDelete(countriesApi.delete.bind(this, this.id));
+        this.$refs.form.onDelete(api.delete.bind(this, this.id));
       }
     }
   }
diff --git a/zero.Backoffice.UI/app/modules/countries/plugin.ts b/zero.Backoffice.UI/app/modules/countries/plugin.ts
index 4a15a7a4..8a8c7cfa 100644
--- a/zero.Backoffice.UI/app/modules/countries/plugin.ts
+++ b/zero.Backoffice.UI/app/modules/countries/plugin.ts
@@ -7,7 +7,8 @@ export default {
   install(app: ZeroPluginOptions)
   {
     app.vue.component('ui-countrypicker', defineAsyncComponent(() => import('./ui-countrypicker.vue')));
-    app.route({ path: '/settings/countries', component: () => import('./countries.vue') });
+    app.route({ name: 'countries', path: '/settings/countries', component: () => import('./countries.vue') });
+    app.route({ name: 'countries-edit', path: '/settings/countries/edit/:id', component: () => import('./country.vue'), props: true });
 
     app.schema('countries', () => import('./list'));
     app.schema('country', () => import('./editor'));
diff --git a/zero.Backoffice.UI/package.json b/zero.Backoffice.UI/package.json
index e1e188e9..2991815a 100644
--- a/zero.Backoffice.UI/package.json
+++ b/zero.Backoffice.UI/package.json
@@ -22,11 +22,12 @@
     "pinia": "^2.0.6"
   },
   "devDependencies": {
-    "sass": "^1.44.0",
-    "vite": "^2.6.14",
-    "@vue/compiler-sfc": "^3.2.24",
     "@vitejs/plugin-vue": "^1.10.1",
+    "@vue/compiler-sfc": "^3.2.24",
+    "sass": "^1.44.0",
     "typescript": "^4.5.2",
+    "vite": "^2.6.14",
+    "vite-plugin-rewrite-all": "^0.1.2",
     "vue-tsc": "^0.29.8"
   }
 }
diff --git a/zero.Backoffice.UI/vite.config.js b/zero.Backoffice.UI/vite.config.js
index 7bc860e9..5a1a4d02 100644
--- a/zero.Backoffice.UI/vite.config.js
+++ b/zero.Backoffice.UI/vite.config.js
@@ -2,6 +2,7 @@ const path = require('path');
 const fs = require('fs');
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import pluginRewriteAll from 'vite-plugin-rewrite-all'
 
 let loadedPlugins = JSON.parse(process.env.ZERO_PLUGINS || "[]");
 
@@ -72,15 +73,19 @@ let config = defineConfig({
       vue: '@vue/compat'
     }
   },
-  plugins: [vue({
-    template: {
-      compilerOptions: {
-        compatConfig: {
-          MODE: 2
+  plugins: [
+    pluginRewriteAll(),
+    vue({
+      template: {
+        compilerOptions: {
+          compatConfig: {
+            MODE: 2
+          }
         }
       }
-    }
-  }), ...zeroPlugins],
+    }),
+    ...zeroPlugins
+  ],
   build: {
     manifest: true,
     outDir: 'dist/zero',