From dc8294a79084ce5ee94d2754340eb699821a479b Mon Sep 17 00:00:00 2001
From: Stuart Clark <stu@rtclark.net>
Date: Sat, 10 Sep 2022 08:26:07 +0000
Subject: [PATCH] chore(#1): update frontend example

---
 .../component/ExtraFieldBlock.vue             | 26 +++++++++++++++++
 .../layout-builder/component/FieldBlock.vue   | 29 +++++++++++++++++++
 example/nuxt/nuxt.config.js                   |  1 +
 3 files changed, 56 insertions(+)
 create mode 100644 example/nuxt/components/druxt/layout-builder/component/ExtraFieldBlock.vue
 create mode 100644 example/nuxt/components/druxt/layout-builder/component/FieldBlock.vue

diff --git a/example/nuxt/components/druxt/layout-builder/component/ExtraFieldBlock.vue b/example/nuxt/components/druxt/layout-builder/component/ExtraFieldBlock.vue
new file mode 100644
index 0000000..2928dd8
--- /dev/null
+++ b/example/nuxt/components/druxt/layout-builder/component/ExtraFieldBlock.vue
@@ -0,0 +1,26 @@
+<template>
+  <div v-if="field === 'links'">
+    @TODO - Node page links
+  </div>
+  <div v-else />
+</template>
+
+<script>
+export default {
+  props: {
+    entity: {
+      type: Object,
+      required: true,
+    },
+
+    item: {
+      type: Object,
+      required: true,
+    }
+  },
+
+  computed: {
+    field: ({ item }) => item.configuration.id.split(':').pop(),
+  }
+}
+</script>
diff --git a/example/nuxt/components/druxt/layout-builder/component/FieldBlock.vue b/example/nuxt/components/druxt/layout-builder/component/FieldBlock.vue
new file mode 100644
index 0000000..65c3ffb
--- /dev/null
+++ b/example/nuxt/components/druxt/layout-builder/component/FieldBlock.vue
@@ -0,0 +1,29 @@
+<template>
+  <div v-html="html" />
+</template>
+
+<script>
+export default {
+  props: {
+    entity: {
+      type: Object,
+      required: true,
+    },
+
+    item: {
+      type: Object,
+      required: true,
+    }
+  },
+
+  computed: {
+    field: ({ item }) => item.configuration.id.split(':').pop(),
+    html: ({ entity, field }) => {
+      if (!entity.attributes[field]) return undefined
+      if (typeof entity.attributes[field] === 'string') return entity.attributes[field]
+      if (typeof entity.attributes[field] === 'object' && entity.attributes[field].processed) return entity.attributes[field].processed
+      return undefined
+    }
+  }
+}
+</script>
diff --git a/example/nuxt/nuxt.config.js b/example/nuxt/nuxt.config.js
index 197ea90..1fbda78 100644
--- a/example/nuxt/nuxt.config.js
+++ b/example/nuxt/nuxt.config.js
@@ -8,5 +8,6 @@ export default {
     'druxt-router/nuxt',
     '@druxt-contrib/layout-builder'
   ],
+  components: true,
   druxt: { baseUrl }
 }