Add DlData component for arbitrary key/value data from user (#1074)

src/components/dl-data.vue

@@ -0,0 +1,55 @@
+<!--
+Copyright 2024 ODK Central Developers
+See the NOTICE file at the top-level directory of this distribution and at
+https://github.com/getodk/central-frontend/blob/master/NOTICE.
+
+This file is part of ODK Central. It is subject to the license terms in
+the LICENSE file found in the top-level directory of this distribution and at
+https://www.apache.org/licenses/LICENSE-2.0. No part of ODK Central,
+including this file, may be copied, modified, propagated, or distributed
+except according to the terms contained in the LICENSE file.
+-->
+
+<!-- The DlData component renders a <dt> and <dd> for arbitrary key/value data
+from the user, e.g., entity data. The key and value will be truncated if they
+are too long. -->
+<template>
+  <dt class="dl-data-dt"><span v-tooltip.text>{{ name }}</span></dt>
+
+  <dd v-if="value == null || value === ''" class="dl-data-dd empty">
+    {{ $t('common.emptyValue') }}
+  </dd>
+  <dd v-else class="dl-data-dd" v-tooltip.text>{{ value }}</dd>
+</template>
+
+<script setup>
+defineOptions({
+  name: 'DlData'
+});
+defineProps({
+  // "key" would have been a nice name for this prop, but sadly that's a
+  // reserved name.
+  name: {
+    type: String,
+    required: true
+  },
+  value: String
+});
+</script>
+
+<style lang="scss">
+@import '../assets/scss/mixins';
+
+.dl-data-dt { @include text-overflow-ellipsis; }
+
+.dl-data-dd {
+  @include line-clamp(3);
+  overflow-wrap: break-word;
+  white-space: break-spaces;
+
+  &.empty {
+    @include italic;
+    color: #888;
+  }
+}
+</style>

src/components/entity/data.vue

@@ -22,11 +22,7 @@ except according to the terms contained in the LICENSE file.
       <loading :state="dataset.initiallyLoading"/>
       <dl v-if="dataExists">
         <div v-for="{ name } of dataset.properties" :key="name">
-          <dt><span v-tooltip.text>{{ name }}</span></dt>
-          <dd v-if="data[name] == null || data[name] === ''" class="empty">
-            {{ $t('common.emptyValue') }}
-          </dd>
-          <dd v-else v-tooltip.text>{{ data[name] }}</dd>
+          <dl-data :name="name" :value="data[name]"/>
         </div>
       </dl>
     </template>
@@ -36,6 +32,7 @@ except according to the terms contained in the LICENSE file.
 <script setup>
 import { computed } from 'vue';
 
+import DlData from '../dl-data.vue';
 import Loading from '../loading.vue';
 import PageSection from '../page/section.vue';
 
@@ -57,23 +54,8 @@ const data = computed(() => entity.currentVersion.data);
 </script>
 
 <style lang="scss">
-@import '../../assets/scss/mixins';
-
 #entity-data {
   margin-bottom: 35px;
-
-  dt { @include text-overflow-ellipsis; }
-
-  dd {
-    @include line-clamp(3);
-    overflow-wrap: break-word;
-    white-space: break-spaces;
-  }
-
-  .empty {
-    @include italic;
-    color: #888;
-  }
 }
 </style>