ayanova/src/api/locale.js

@@ -98,7 +98,8 @@ export default {
     "AreYouSureUnsavedChanges",
     "Leave",
     "Copy",
-    "Tags"
+    "Tags",
+    "Customize"
   ],
   decimalValidate(required) {
     return { required: required, decimal: [2, this.format().decimalSeparator] };

ayanova/src/components/custom-fields-control.vue

@@ -0,0 +1,45 @@
+<template>
+  <div>
+    CUSTOM FIELDS:
+    <span>
+      {{ value }}
+    </span>
+  </div>
+</template>
+<script>
+/////////////////////////////////////////////////////////////////////////////////////////////////////////////
+/*  Xeslint-disable    */
+////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
+export default {
+  data() {
+    return {
+      obj: { blah: "blah", rhubarb: "rhubarb" }
+    };
+  },
+  props: {
+    value: String
+  },
+  watch: {
+    value(val) {
+      //this ensures the parent form gets the onchange event
+      //not actually sure why there are two here but it worked with the datetime picker so I replicated it here
+      this.$emit("input", val);
+      this.$emit("change", val);
+    }
+  },
+
+  methods: {},
+  beforeCreate() {
+    //check pre-requisites exist just in case
+    if (this.$gzdevmode()) {
+      if (!this.$_) {
+        throw "tag-picker: $_ (lodash) is required and missing";
+      }
+      if (!this.$gzlocale) {
+        throw "tag-picker: $gzlocale is required and missing";
+      }
+    }
+  }
+};
+</script>