From b156d356a87eeb1f04dc0dd1e0eb3e3408a5075a Mon Sep 17 00:00:00 2001
From: boutell <tommybgoode@gmail.com>
Date: Fri, 17 May 2024 14:23:10 -0400
Subject: [PATCH] demo for clement, see the test field in the home page
 settings

---
 modules/@apostrophecms/home-page/index.js     | 16 ++++++++-
 .../ui/apos/components/TestField.vue          | 36 +++++++++++++++++++
 2 files changed, 51 insertions(+), 1 deletion(-)
 create mode 100644 modules/@apostrophecms/home-page/ui/apos/components/TestField.vue

diff --git a/modules/@apostrophecms/home-page/index.js b/modules/@apostrophecms/home-page/index.js
index 584b8dd6..cd789f2d 100644
--- a/modules/@apostrophecms/home-page/index.js
+++ b/modules/@apostrophecms/home-page/index.js
@@ -4,6 +4,10 @@ module.exports = {
   },
   fields: {
     add: {
+      test: {
+        type: 'test',
+        label: 'Test'
+      },
       main: {
         type: 'area',
         options: {
@@ -50,9 +54,19 @@ module.exports = {
         label: 'Basics',
         fields: [
           'title',
-          'main'
+          'main',
+          'test'
         ]
       }
     }
+  },
+  init(self) {
+    self.apos.schema.addFieldType({
+      name: 'test',
+      convert(req, field, data, object) {
+        object[field.name] = self.apos.launder.string(data[field.name]);
+      },
+      vueComponent: 'TestField'
+    });
   }
 };
diff --git a/modules/@apostrophecms/home-page/ui/apos/components/TestField.vue b/modules/@apostrophecms/home-page/ui/apos/components/TestField.vue
new file mode 100644
index 00000000..4fa1ef61
--- /dev/null
+++ b/modules/@apostrophecms/home-page/ui/apos/components/TestField.vue
@@ -0,0 +1,36 @@
+<template>
+  <AposInputWrapper
+    :modifiers="modifiers" :field="field"
+    :error="effectiveError" :uid="uid"
+    :display-options="displayOptions"
+  >
+    <template #body>
+      <div class="apos-input-wrapper">
+        <input v-model="next" />
+        <button class="clear" @click="clear">Clear</button>
+      </div>
+    </template>
+  </AposInputWrapper>
+</template>
+
+<script>
+import AposInputMixin from 'Modules/@apostrophecms/schema/mixins/AposInputMixin';
+
+export default {
+  name: 'TestField',
+  mixins: [ AposInputMixin ],
+  methods: {
+    validate(value) {
+      if (this.field.required) {
+        if (!value) {
+          return 'required';
+        }
+      }
+      return false;
+    },
+    clear() {
+      this.next = null;
+    }
+  }
+};
+</script>