From ce1611a0069ae598b3f13e33253b209ba697edf7 Mon Sep 17 00:00:00 2001
From: liangping <18786721@qq.com>
Date: Wed, 13 Apr 2022 20:46:18 +0800
Subject: [PATCH] improve Nest Display compnent

---
 src/views/ArrayFieldComponent.vue  | 39 ++++++++++++++++++++++++++----
 src/views/ObjectFieldComponent.vue |  5 +++-
 2 files changed, 38 insertions(+), 6 deletions(-)

diff --git a/src/views/ArrayFieldComponent.vue b/src/views/ArrayFieldComponent.vue
index 860eb750..84dde492 100644
--- a/src/views/ArrayFieldComponent.vue
+++ b/src/views/ArrayFieldComponent.vue
@@ -4,8 +4,8 @@
     :items="tablefield"
     :sticky-header="true"
     :no-border-collapse="true"
-    responsive="sm"
-    class="ml-0 mr-0"
+    responsive="md"
+    class="ml-0 mr-0 dataview text-nowrap"
   >
     <template #cell()="data">
       <span v-if="isTokenField(data.value)">{{ formatTokens(data.value) }}</span>
@@ -63,9 +63,9 @@ export default {
       if (percentage.test(value)) {
         return `${percent(value)}%`
       }
-      if (value.length > 40) {
-        return value.substring(0, 40).concat('...')
-      }
+      // if (value.length > 40) {
+      //   return value.substring(0, 40).concat('...')
+      // }
       return value
     },
     formatTokens(value) {
@@ -80,3 +80,32 @@ export default {
   },
 }
 </script>
+<style lang='css' scoped>
+/* Small devices (landscape phones, 576px and up) */
+@media (min-width: 576px) {
+  .dataview {
+    max-width: 300px;
+  }
+}
+
+/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
+@media (min-width: 768px) {
+  .dataview {
+    max-width: 500px;
+  }
+}
+
+/* Large devices (desktops, 992px and up) */
+@media (min-width: 992px) {
+  .dataview {
+    max-width: 700px;
+  }
+}
+
+/* Extra large devices (large desktops, 1200px and up) */
+@media (min-width: 1200px) {
+  .dataview {
+    max-width: 820px;
+  }
+}
+</style>
diff --git a/src/views/ObjectFieldComponent.vue b/src/views/ObjectFieldComponent.vue
index 4aa148ad..72ea8e66 100644
--- a/src/views/ObjectFieldComponent.vue
+++ b/src/views/ObjectFieldComponent.vue
@@ -34,7 +34,10 @@
           hover
           class="overflow-hidden"
         >
-          <b-tabs small>
+          <b-tabs
+            v-if="value"
+            small
+          >
             <b-tab
               v-for="key in Object.keys(value)"
               :key="key"