fix field detail style

resources/js/components/DetailField.vue

@@ -1,99 +1,17 @@
 <template>
-  <default-field :field="field" :errors="errors" :show-help-text="false">
-    <template slot="field">
-      <div :dir="field.rtl ? 'rtl' : 'ltr'" class="p-2 nova-tree-attach-many">
-        <treeselect v-model="selectedValues"
-            :id="field.name"
-            :multiple="field.multiple"
-            :options="field.options"
-            :flat="field.flatten"
-            :searchable="field.searchable"
-            :always-open="field.alwaysOpen"
-            :disabled="true"
-            :sort-value-by="field.sortValueBy"
-            :placeholder="field.placeholder"
-            :max-height="field.maxHeight"
-            :value-consists-of="field.valueConsistsOf"
-            :normalizer="normalizer"
-        />
+  <panel-item :field="field">
+    <template slot="value">
+      <div v-for="(value, index) in field.value" :style="{
+        'marginTop': index === 0 ? '0' : '6px'
+      }">
+        {{ value[field.labelKey] }}
       </div>
-      <help-text class="error-text mt-2 text-danger" v-if="hasErrors">
-        {{ firstError }}
-      </help-text>
     </template>
-  </default-field>
+  </panel-item>
 </template>
 
 <script>
-import { FormField, HandlesValidationErrors } from "laravel-nova";
-
-import Treeselect from "@riophae/vue-treeselect";
-import "@riophae/vue-treeselect/dist/vue-treeselect.css";
-
 export default {
-  components: {Treeselect},
-  mixins: [FormField, HandlesValidationErrors],
-
-  props: ['resourceName', 'resourceId', 'field'],
-
-  data()
-  {
-    return {
-      selectedValues: null,
-    };
-  },
-  methods: {
-    normalizer( node )
-    {
-      return {
-        id: node[this.field.idKey],
-        label: node[this.field.labelKey],
-        children: node.hasOwnProperty(this.field.childrenKey)
-            && node[this.field.childrenKey].length > 0
-            ? node[this.field.childrenKey]
-            : false
-      }
-    },
-    setInitialValue()
-    {
-        let baseUrl = '/nova-vendor/nova-nested-tree-attach-many/';
-
-        if( this.resourceId )
-        {
-            const url = [
-                baseUrl + this.resourceName,
-                this.resourceId,
-                "attached",
-                this.field.attribute,
-                this.field.idKey
-            ];
-
-            Nova.request( url.join( "/" ) )
-                .then( ( data ) =>
-                {
-                    if(!this.field.multiple)
-                    {
-                        this.selectedValues = data.data || undefined;
-                    }
-                    else
-                    {
-                        this.selectedValues = data.data || [];
-                    }
-                } );
-        }
-    },
-    fill( formData )
-    {
-      formData.append( this.field.attribute, JSON.stringify( this.selectedValues ) )
-    },
-  },
-  computed:{
-    hasErrors: function() {
-      return this.errors.errors.hasOwnProperty(this.field.attribute);
-    },
-    firstError: function() {
-      return this.errors.errors[this.field.attribute][0]
-    },
-  }
+  props: ['resourceName', 'resourceId', 'field']
 }
 </script>