show label in detail field

bastihilger · Dec 5, 2019 · 4b586d6 · 4b586d6
1 parent 72576f5
commit 4b586d6
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 13 deletions.
diff --git a/dist/js/field.js b/dist/js/field.js
diff --git a/resources/js/components/DetailField.vue b/resources/js/components/DetailField.vue
@@ -1,26 +1,48 @@
 <template>
-    <div class="tiptap-detail-field py-4">
-        <truncate
-            clamp="Show More"
-            :length="200"
-            less="Show Less"
-            type="html"
-            :text="field.value"
-        >
-
-        </truncate>
+    <div class="flex">
+        <div class="w-1/4 py-4">
+            <h4 class="font-normal text-80">
+                {{ label }}
+            </h4>
+        </div>
+
+        <div class="tiptap-detail-field w-3/4 py-4">
+            <truncate
+                clamp="Show More"
+                :length="200"
+                less="Show Less"
+                type="html"
+                :text="field.value"
+            >
+
+            </truncate>
+        </div>
     </div>
 </template>
 
 <script>
 import truncate from 'vue-truncate-collapsed'
 
 export default {
-    props: ['resource', 'resourceName', 'resourceId', 'field'],
-
     components: {
         truncate,
     },
+
+    props: {
+        field: {
+            type: Object,
+            required: true,
+        },
+        fieldName: {
+            type: String,
+            default: '',
+        },
+    },
+    computed: {
+        label() {
+            return this.fieldName || this.field.name
+        },
+    },
 }
 </script>