Revert "vite++"

This reverts commit fcaa4f884c.

zero.Web.UI/components/forms/error.vue

@@ -1,5 +1,4 @@
 <template>
-  formData: {{formData}}
   <div class="ui-error" v-if="visible">
     <ui-message v-for="error in errors" :key="error.id" type="error" :text="error.message" :title="error.field" />
   </div>
@@ -32,8 +31,6 @@
       errors: []
     }),
 
-    inject: [ 'formData' ],
-
     mounted ()
     {
       

zero.Web.UI/components/forms/form.vue

@@ -13,7 +13,6 @@
   import Overlay from '@zero/services/overlay.js'
   import Notification from '@zero/services/notification.js'
   import { isArray as _isArray, filter as _filter, groupBy as _groupBy, each as _each, difference as _difference } from 'underscore'
-  import { computed } from 'vue'
 
   export default {
     name: 'uiForm',
@@ -50,10 +49,6 @@
       submitBlocked: false
     }),
 
-    provide: () => ({
-      formData: 'my-state'
-    }),
-
     watch: {
       '$route': function ()
       {

zero.Web.UI/components/modules/module-preview.vue

@@ -2,7 +2,7 @@
   <div class="ui-module-item" v-if="!loading" :data-module="alias" :class="{'can-edit': canEdit }">
     <div class="ui-module-item-content" v-if="module" @click="emit('edit')">
       <span v-if="!hasPreviewSettings || renderer.preview.label !== false" class="ui-module-item-header">{{module.name}}</span>
-      <module-preview-inner v-if="tryRender" :template="renderer.preview.template" :value="value" />
+      <ui-module-preview-inner v-if="tryRender" :template="renderer.preview.template" :value="value" />
     </div>
     <div class="ui-module-item-content" v-else>
       <span class="ui-module-item-header is-error"><i class="fth-alert-circle"></i> {{alias}}</span>
@@ -29,15 +29,12 @@
 
 <script>
   import { find as _find } from 'underscore';
-  import ModulePreviewInner from './module-preview-inner.vue';
 
   export default {
     name: 'uiModulePreview',
 
     emits: ['edit', 'remove', 'isActive'],
 
-    components: { ModulePreviewInner },
-
     props: {
       value: {
         type: Object,

zero.Web.UI/components/modules/modules.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="ui-modules-inner">
     <div v-if="items.length" class="ui-modules-inner-sortable" v-sortable="{ onUpdate: onSortingUpdated }">
-      <module-preview v-for="item in items" :key="item.id" :types="moduleTypes" :value="item" @edit="edit" @remove="remove" :disabled="disabled" />
+      <ui-module-preview v-for="item in items" :key="item.id" :types="moduleTypes" :value="item" @edit="edit" @remove="remove" :disabled="disabled" />
     </div>
-    <modules-select ref="moduleSelect" :types="moduleTypes" :value="value" v-if="canAdd" @selected="onAdd" />
+    <ui-modules-select ref="moduleSelect" :types="moduleTypes" :value="value" v-if="canAdd" @selected="onAdd" />
   </div>
 </template>
 
@@ -11,8 +11,6 @@
 <script>
   import ModulesApi from '@zero/resources/modules.js';
   import EditModuleOverlay from './edit-module.vue';
-  import ModulePreview from './module-preview.vue';
-  import ModulesSelect from './modules-select.vue';
   import Overlay from '@zero/services/overlay.js';
   import Arrays from '@zero/services/arrays.js';
 
@@ -21,8 +19,6 @@
 
     emits: ['input'],
 
-    components: { ModulePreview, ModulesSelect },
-
     props: {
       value: {
         type: Array,

zero.Web.UI/components/register.js

@@ -1,91 +1,61 @@
-let imports = [
-  // buttons
-  () => import('./buttons/add-button.vue'),
-  () => import('./buttons/button.vue'),
-  () => import('./buttons/dot-button.vue'),
-  () => import('./buttons/icon-button.vue'),
-  () => import('./buttons/select-button.vue'),
-  () => import('./buttons/state-button.vue'),
+// Globally register all base components for convenience, because they
+// will be used very frequently. Components are registered using the
+// PascalCased version of their file name.
 
-  // forms
-  () => import('./forms/alias.vue'),
-  () => import('./forms/check-list.vue'),
-  () => import('./forms/error-view.vue'),
-  () => import('./forms/error.vue'),
-  () => import('./forms/form-header.vue'),
-  () => import('./forms/form.vue'),
-  () => import('./forms/input-list.vue'),
-  () => import('./forms/media-old.vue'),
-  () => import('./forms/property.vue'),
-  () => import('./forms/rte.vue'),
-  () => import('./forms/search.vue'),
-  () => import('./forms/tags.vue'),
-  () => import('./forms/toggle.vue'),
+let components = [];
+//const directories = ['buttons', 'forms', 'messages', 'tables', 'tabs'];
 
-  // modules
-  () => import('./modules/modules.vue'),
+// TODO this file will import all vue component files with subdirectories
+// if it contains a file "overlay.vue" it will create an "ui-overlay" component
+// if another folder contains a file "overlay.vue" it is not used anymore or overridden.
+// we don't want to add all files but only files where we define global component access in its settings
 
-  // overlays
-  () => import('./overlays/confirm.vue'),
-  () => import('./overlays/dropdown-button.vue'),
-  () => import('./overlays/dropdown-separator.vue'),
-  () => import('./overlays/dropdown.vue'),
-  () => import('./overlays/overlay-editor.vue'),
+// 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,
+  // .vue files
+  /[\w-]+\.vue$/
+);
 
-  // pickers
-  () => import('./pickers/colorPicker/colorpicker.vue'),
-  () => import('./pickers/countryPicker/countrypicker.vue'),
-  () => import('./pickers/datePicker/datepicker.vue'),
-  () => import('./pickers/dateRangePicker/daterangepicker.vue'),
-  () => import('./pickers/iconPicker/iconpicker.vue'),
-  () => import('./pickers/mediaPicker/mediapicker.vue'),
-  () => import('./pickers/userPicker/userpicker.vue'),
-  () => import('./pickers/pick.vue'),
-
-  // tables
-  () => import('./tables/table.vue'),
-  () => import('./tables/table-filter.vue'),
-
-  // tabs
-  () => import('./tabs/tab.vue'),
-  () => import('./tabs/tabs.vue'),
-  () => import('./tabs/inline-tabs.vue'),
-
-  // tabs
-  () => import('./tree/tree.vue'),
-  () => import('./tree/tree-item.vue'),
-
-  // misc
-  () => import('./datagrid/datagrid.vue'),
-  () => import('./messages/message.vue'),
-  () => import('./date.vue'),
-  () => import('./header-bar.vue'),
-  () => import('./loading.vue'),
-  () => import('./pagination.vue'),
-  () => import('./permissions.vue'),
-  () => import('./revisions.vue')
-];
-
-const resolveFilename = path =>
+// For each matching file name...
+requireComponent.keys().forEach((path) =>
 {
   let pathParts = path.split('/');
-  return 'ui' + pathParts[pathParts.length - 1]
+  let fileName = pathParts[pathParts.length - 1];
+
+  // Get the component config
+  const componentConfig = requireComponent(path);
+  // Get the PascalCase version of the component name
+  const componentName = 'ui' + fileName
+    // Remove the "./_" from the beginning
     .replace(/^\.\/_/, '')
+    // Remove the file extension from the end
     .replace(/\.\w+$/, '')
+    // Split up kebabs
     .split('-')
+    // Upper case
     .map((kebab) => kebab.charAt(0).toUpperCase() + kebab.slice(1))
+    // Concatenated
     .join('');
-};
+
+  if (componentName === 'uiOverlay')
+  {
+    return;
+  }
+
+  components.push({
+    name: componentName,
+    config: componentConfig.default || componentConfig
+  })
+});
 
 export default function (app)
 {
-  imports.forEach(path =>
+  components.forEach(component =>
   {
-    path().then(resolved =>
-    {
-      const config = resolved.default || resolved;
-      const name = config.name || resolveFilename(config.__hmrId);
-      app.component(name, config);
-    });
+    app.component(component.name, component.config);
   });
 };

zero.Web.UI/components/tabs/inline-tabs.vue

@@ -17,7 +17,7 @@
 
 <script>
   export default {
-    name: 'uiInlineTabs',
+    name: 'uiTabs',
 
     props: {
       cache: {