[#5] feat: add Teaser and inline edit.

nuxt/components/app/FormInput.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="form-control">
+    <input
+      v-model="model"
+      class="input input-bordered"
+      type="text"
+      v-bind="$attrs"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    value: {
+      type: String,
+      required: true,
+    }
+  },
+
+  data: ({ value }) => ({
+    model: value,
+  }),
+
+  watch: {
+    model() {
+      this.$emit('input', this.model)
+    }
+  }
+}
+</script>

nuxt/components/druxt/entity/node/article/Default.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="flex">
+    <div class="flex-auto mr-10">
+      <h1 class="mb-5 text-5xl">{{ entity.attributes.title }}</h1>
+      <slot />
+    </div>
+
+    <div>
+      <div class="bordered card">
+        <div class="card-body">
+          <div class="avatar placeholder">
+            <div class="bg-neutral-focus text-neutral-content rounded-full h-16 w-16">
+              <span class="text-xl"></span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { DruxtEntityMixin } from 'druxt-entity'
+
+export default {
+  mixins: [DruxtEntityMixin],
+}
+</script>

nuxt/components/druxt/entity/node/article/Teaser.vue

@@ -1,19 +1,20 @@
 <template>
-  <div class="card bordered hover:shadow mb-5">
+  <div class="card bordered hover:shadow mb-5" @dblclick="toggleInlineEdit">
     <!-- <figure>
       <img src="https://picsum.photos/id/1005/60/40" class="w-full" />
     </figure> -->
     <div class="card-body">
       <!-- Title -->
-      <NuxtLink class="card-title" :to="url" v-text="entity.attributes.title" />
+      <NuxtLink v-if="!inline.edit" class="card-title" :to="url" v-text="entity.attributes.title" />
+      <AppFormInput v-else v-model="entity.attributes.title" />
 
       <!-- Tags -->
       <div v-if="tags" class="mb-5">
-        <slot name="field_tags" />
+        <slot name="field_tags" :inline-edit="inline.edit" />
       </div>
 
       <!-- Body -->
-      <slot name="body" />
+      <slot name="body" :inline-edit="inline.edit" />
 
       <div class="card-actions">
         <NuxtLink class="btn btn-primary" :to="url">Read more</NuxtLink>
@@ -24,9 +25,10 @@
 
 <script>
 import { DruxtEntityMixin } from 'druxt-entity'
+import { MixinEditInline } from '~/mixins/edit-inline'
 
 export default {
-  mixins: [DruxtEntityMixin],
+  mixins: [DruxtEntityMixin, MixinEditInline],
 
   computed: {
     tags: ({ model }) =>

nuxt/mixins/edit-inline.js

@@ -0,0 +1,15 @@
+const MixinEditInline = {
+  data: () => ({
+    inline: {
+      edit: false,
+    }
+  }),
+
+  methods: {
+    toggleInlineEdit() {
+      this.inline.edit = !this.inline.edit
+    }
+  }
+}
+
+export { MixinEditInline }