adds Expansion panel for device properties

components/DevicePropertyExpansionPanel.vue

+<!--
+Web client of the Sensor Management System software developed within the
+Helmholtz DataHub Initiative by GFZ and UFZ.
+
+Copyright (C) 2020
+- Nils Brinckmann (GFZ, nils.brinckmann@gfz-potsdam.de)
+- Marc Hanisch (GFZ, marc.hanisch@gfz-potsdam.de)
+- Helmholtz Centre Potsdam - GFZ German Research Centre for
+  Geosciences (GFZ, https://www.gfz-potsdam.de)
+
+Parts of this program were developed within the context of the
+following publicly funded projects or measures:
+- Helmholtz Earth and Environment DataHub
+  (https://www.helmholtz.de/en/research/earth_and_environment/initiatives/#h51095)
+
+Licensed under the HEESIL, Version 1.0 or - as soon they will be
+approved by the "Community" - subsequent versions of the HEESIL
+(the "Licence").
+
+You may not use this work except in compliance with the Licence.
+
+You may obtain a copy of the Licence at:
+https://gitext.gfz-potsdam.de/software/heesil
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the Licence is distributed on an "AS IS" basis,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+implied. See the Licence for the specific language governing
+permissions and limitations under the Licence.
+-->
+<template>
+  <v-expansion-panel>
+    <v-expansion-panel-header>
+      <v-row no-gutters>
+        <v-col cols="11">
+          {{ value.label }}
+        </v-col>
+        <v-col
+          cols="1"
+          align-self="end"
+          class="text-right"
+        >
+          <slot name="actions" />
+        </v-col>
+      </v-row>
+    </v-expansion-panel-header>
+    <v-expansion-panel-content>
+      <slot />
+    </v-expansion-panel-content>
+  </v-expansion-panel>
+</template>
+
+<script lang="ts">
+/**
+ * @file provides a component for collections of DevicePropertyForms
+ * @author <marc.hanisch@gfz-potsdam.de>
+ */
+import { Vue, Component, Prop } from 'nuxt-property-decorator'
+
+/**
+ * A class component that lists DevicePropertyForms as ExpansionPanels
+ * @extends Vue
+ */
+@Component
+// @ts-ignore
+export default class DevicePropertyExpansionPanel extends Vue {
+  /**
+   * a DeviceProperty
+   */
+  @Prop({
+    required: true,
+    type: Object
+  })
+  // @ts-ignore
+  readonly value!: DeviceProperty
+}
+</script>