Rename all the things (directus#586)

* Rename v-activity-overview v-activity

* Rename v-edit-form v-form

* Rename interface->input

* Rename readonly->display

* Move interface ext in interfaces folder

* Rename listing to layout

* Rename v-header-bar -> v-header

* Rename v-item-listing -> v-items

* Fix renaming bug

* Rename v-permission-widget -> v-permissions

* Rename item-listing-> items & edit->item

* Fix broken import

package.json

@@ -17,19 +17,19 @@
     "docs:build": "vuepress build docs"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^3.0.0-rc.8",
-    "@vue/cli-plugin-eslint": "^3.0.0-rc.8",
-    "@vue/cli-plugin-pwa": "^3.0.0-rc.8",
-    "@vue/cli-service": "^3.0.0-rc.8",
-    "@vue/eslint-config-prettier": "^3.0.0-rc.8",
+    "@vue/cli-plugin-babel": "^3.0.0-rc.10",
+    "@vue/cli-plugin-eslint": "^3.0.0-rc.10",
+    "@vue/cli-plugin-pwa": "^3.0.0-rc.10",
+    "@vue/cli-service": "^3.0.0-rc.10",
+    "@vue/eslint-config-prettier": "^3.0.0-rc.10",
     "node-sass": "^4.9.2",
     "sass-loader": "^6.0.6",
     "vue-template-compiler": "^2.5.13",
     "vuepress": "^0.11.0"
   },
   "dependencies": {
     "@directus/format-title": "^1.2.0",
-    "@directus/sdk-js": "^3.0.0",
+    "@directus/sdk-js": "^3.1.0",
     "@rijk/jwt-payload": "^1.0.1",
     "axios": "^0.18.0",
     "body-scroll-lock": "^2.4.6",

src/components/activity-overview/activity-overview.vue → src/components/activity/activity.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="v-activity-overview">
+  <div class="v-activity">
     <form
       v-show="show !== 'activity'"
       class="new-comment"
@@ -65,13 +65,11 @@
 
 <script>
 import snarkdown from "snarkdown";
-import EditForm from "../edit-form/edit-form.vue";
 import VDiff from "./diff.vue";
 
 export default {
-  name: "v-activity-overview",
+  name: "v-activity",
   components: {
-    EditForm,
     VDiff
   },
   data() {
@@ -178,7 +176,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.v-activity-overview {
+.v-activity {
   position: relative;
 
   &::before {
@@ -416,7 +414,7 @@ export default {
 </style>
 
 <style lang="scss">
-.v-activity-overview .content .comment {
+.v-activity .content .comment {
   a {
     color: var(--accent);
     text-decoration: none;

src/components/extensions/readonly/readonly-fallback.vue → src/components/extension/interface/display/display-fallback.vue

@@ -1,10 +1,10 @@
 <template>
-  <div class="v-readonly-fallback">{{ value }}</div>
+  <div class="v-ext-display-fallback">{{ value }}</div>
 </template>
 
 <script>
 export default {
-  name: "v-readonly-fallback",
+  name: "v-ext-display-fallback",
   props: {
     value: {
       type: null,

src/components/extension/interface/display/display-loading.vue

@@ -0,0 +1,9 @@
+<template>
+  <div class="v-ext-display-loading">LOADING</div>
+</template>
+
+<script>
+export default {
+  name: "v-ext-display-loading"
+};
+</script>

src/components/extensions/readonly/readonly.vue → src/components/extension/interface/display/display.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-readonly-fallback
+  <v-ext-display-fallback
     v-if="interfaceType === null"
     :name="name"
     :value="value"
@@ -9,7 +9,7 @@
     :required="required"
     :loading="loading"
     :options="optionsWithDefaults"
-    class="v-readonly" />
+    class="v-ext-display" />
   <component
     v-else
     :is="componentName"
@@ -21,18 +21,18 @@
     :required="required"
     :loading="loading"
     :options="optionsWithDefaults"
-    class="v-readonly" />
+    class="v-ext-display" />
 </template>
 
 <script>
 import Vue from "vue";
-import loadExtension from "../../../helpers/load-extension";
-import componentExists from "../../../helpers/component-exists";
-import VReadonlyFallback from "./readonly-fallback.vue";
-import VReadonlyLoading from "./readonly-loading.vue";
+import loadExtension from "../../../../helpers/load-extension";
+import componentExists from "../../../../helpers/component-exists";
+import VExtDisplayFallback from "./display-fallback.vue";
+import VExtDisplayLoading from "./display-loading.vue";
 
 export default {
-  name: "v-readonly",
+  name: "v-ext-display",
   props: {
     interfaceType: {
       type: String,
@@ -72,7 +72,7 @@ export default {
     }
   },
   components: {
-    VReadonlyFallback
+    VExtDisplayFallback
   },
   computed: {
     interfaces() {
@@ -82,7 +82,7 @@ export default {
       return this.interfaces && this.interfaces[this.interfaceType];
     },
     componentName() {
-      return `readonly-${this.interfaceType}`;
+      return `display-${this.interfaceType}`;
     },
     optionsWithDefaults() {
       if (!this.interfaceInfo) return {};
@@ -100,36 +100,36 @@ export default {
   },
   watch: {
     id() {
-      this.registerReadonly();
+      this.registerDisplay();
     }
   },
   created() {
-    this.registerReadonly();
+    this.registerDisplay();
   },
   methods: {
     /**
      * Register the extension as component (if it hasn't been registered before yet)
      */
-    registerReadonly() {
+    registerDisplay() {
       // If component already exists, do nothing
       if (componentExists(this.componentName)) return;
 
       // If the extension isn't known by the API (e.g. it's not in the store), register it with the
       //   fallback immediately
       if (!this.interfaceInfo) {
-        Vue.component(this.componentName, VReadonlyFallback);
+        Vue.component(this.componentName, VExtDisplayFallback);
         return;
       }
 
       const filePath = `${this.$api.url}/${this.interfaceInfo.path.replace(
         "meta.json",
-        "readonly.js"
+        "display.js"
       )}`;
 
       Vue.component(this.componentName, () => ({
         component: loadExtension(filePath),
-        error: VReadonlyFallback,
-        loading: VReadonlyLoading
+        error: VExtDisplayFallback,
+        loading: VExtDisplayLoading
       }));
     }
   }

src/components/extensions/interface/interface-fallback.vue → src/components/extension/interface/input/input-fallback.vue

@@ -1,13 +1,13 @@
 <template>
   <v-input
     :value="value"
-    class="v-interface-fallback"
+    class="v-ext-input-fallback"
     @input="$emit('input', $event)" />
 </template>
 
 <script>
 export default {
-  name: "v-interface-fallback",
+  name: "v-ext-input-fallback",
   props: {
     value: {
       type: null,
@@ -19,13 +19,13 @@ export default {
     }
   },
   created() {
-    this.$notify.alert(this.$t("extension_error", { ext: this.interfaceName }));
+    this.$notify.alert(this.$t("extension_error", { ext: this.inputName }));
   }
 };
 </script>
 
 <style lang="scss" scoped>
-.v-interface-fallback {
+.v-ext-input-fallback {
   max-width: var(--width-normal);
 }
 </style>

src/components/extension/interface/input/input-loading.vue

@@ -0,0 +1,9 @@
+<template>
+  <div class="v-ext-input-loading">LOADING</div>
+</template>
+
+<script>
+export default {
+  name: "v-ext-input-loading"
+};
+</script>

src/components/extensions/interface/interface.vue → src/components/extension/interface/input/input.vue

@@ -1,7 +1,7 @@
 <template>
   <component
     :is="componentName"
-    :interface-name="id"
+    :input-name="id"
     :name="name"
     :value="value"
     :type="typeOrDefault"
@@ -14,7 +14,7 @@
     :relationship="relationship"
     :fields="fields"
     :values="values"
-    class="v-interface-extension"
+    class="v-ext-input"
     @input="$emit('input', $event)"
     @setfield="$emit('setfield', $event)">
     <slot />
@@ -23,13 +23,13 @@
 
 <script>
 import Vue from "vue";
-import loadExtension from "../../../helpers/load-extension";
-import componentExists from "../../../helpers/component-exists";
-import InterfaceFallback from "./interface-fallback.vue";
-import InterfaceLoading from "./interface-loading.vue";
+import loadExtension from "../../../../helpers/load-extension";
+import componentExists from "../../../../helpers/component-exists";
+import InputFallback from "./input-fallback.vue";
+import InputLoading from "./input-loading.vue";
 
 export default {
-  name: "v-interface-extension",
+  name: "v-ext-input",
   props: {
     id: {
       type: String,
@@ -92,7 +92,7 @@ export default {
       return this.interfaces && this.interfaces[this.id];
     },
     componentName() {
-      return `interface-${this.id}`;
+      return `input-${this.id}`;
     },
     typeOrDefault() {
       if (!this.interface) return null;
@@ -137,19 +137,19 @@ export default {
       // If the extension isn't known by the API (e.g. it's not in the store), register it with the
       //   fallback immediately
       if (!this.interface) {
-        Vue.component(this.componentName, InterfaceFallback);
+        Vue.component(this.componentName, InputFallback);
         return;
       }
 
       const filePath = `${this.$api.url}/${this.interface.path.replace(
         "meta.json",
-        "interface.js"
+        "input.js"
       )}`;
 
       Vue.component(this.componentName, () => ({
         component: loadExtension(filePath),
-        error: InterfaceFallback,
-        loading: InterfaceLoading
+        error: InputFallback,
+        loading: InputLoading
       }));
     }
   }

src/components/extension/layout/layout-options/layout-options-fallback.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="v-ext-layout-options-fallback" />
+</template>
+
+<script>
+export default {
+  name: "v-ext-layout-options-fallback",
+  props: {
+    layoutName: {
+      type: String,
+      default: ""
+    }
+  },
+  created() {
+    this.$notify.alert(this.$t("extension_error", { ext: this.layoutName }));
+  }
+};
+</script>