Add button section and editable expansion panel header.

src/components/VBtnSection.vue

@@ -0,0 +1,6 @@
+<template>
+  <v-btn small right :icon="$attrs.text === undefined" :color="$attrs.color || 'primary'" v-bind="$attrs"
+    v-on="$listeners">
+    <slot></slot>
+  </v-btn>
+</template>

src/components/VEditableExpansionPanelHeader.vue

@@ -0,0 +1,49 @@
+<template>
+  <v-expansion-panel-header class="panel-header" v-bind="$attrs" v-on="$listeners">
+    <template v-slot:default="{ open }">
+      <v-row no-gutters>
+        <v-col cols="9">
+          <slot></slot>
+        </v-col>
+        <v-col cols="3" class="text--secondary pr-3 text-right">
+
+          <v-fade-transition v-if="canEdit">
+            <v-icon color="primary" v-if="open" @click.stop="editClicked()">mdi-pencil-outline</v-icon>
+          </v-fade-transition>
+
+          <div class="ml-3 d-inline panel-error-count" v-if="errorCount">
+            <v-avatar color="error lighten-1" size="22" class="error-count">
+              <span class="white--text text-caption">{{ errorCount }}</span>
+            </v-avatar>
+          </div>
+        </v-col>
+      </v-row>
+    </template>
+  </v-expansion-panel-header>
+</template>
+<script>
+export default {
+  props: {
+    canEdit: {
+      type: Boolean,
+      default: false,
+    },
+    errorCount: {
+      type: Number,
+      default: 0,
+    },
+  },
+
+  methods: {
+    editClicked: function () {
+      this.$emit("editClicked");
+    }
+  }
+};
+</script>
+<style scoped>
+.error-count {
+  margin: -6px 0 -2px;
+  vertical-align: text-bottom;
+}
+</style>

src/plugin.js

@@ -18,6 +18,8 @@ import VBannerSharedo from "./components/VBannerSharedo.vue";
 import VTrafficLight from "./components/VTrafficLight.vue";
 import VDatetimeTrafficLight from "./components/VDatetimeTrafficLight.vue";
 import VRichTextEditor from "./components/VRichTextEditor.vue"
+import VBtnSection from "./components/VBtnSection.vue"
+import VEditableExpansionPanelHeader from "./components/VEditableExpansionPanelHeader.vue"
 
 import ContactUrlGenerator from "./util/contactUrl.js";
 import MapUrlGenerator from "./util/mapUrl.js";
@@ -40,6 +42,8 @@ export default {
         Vue.component("VTrafficLight", VTrafficLight);
         Vue.component("VDatetimeTrafficLight", VDatetimeTrafficLight)
         Vue.component("VRichTextEditor", VRichTextEditor);
+        Vue.component("VBtnSection", VBtnSection);
+        Vue.component("VEditableExpansionPanelHeader", VEditableExpansionPanelHeader);
     },
 }
 
@@ -64,6 +68,7 @@ export {
     VTrafficLight,
     VDatetimeTrafficLight,
     VRichTextEditor,
+    VBtnSection,
 
     // Util
     ContactUrlGenerator,