Merge pull request #13 from aihowes/change-field-width

Fix #10 - Make field full width

Author: Johnathan

dist/js/field.js

@@ -60,3 +60,16 @@ By default, the Trumbowyg field will not display their content when viewing a re
         ];
     }
 ```
+
+By default, the Trumbowyg field will display in full width you can change this back to Nova's default (half) by using the `defaultWidth` method on the field, as shown below.
+
+```
+    public function fields(Request $request)
+    {
+        return [
+            ...,
+            NovaTrumbowyg::make('body')->defaultWidth(),
+            ...
+        ];
+    }
+```

readme.md

@@ -1,5 +1,5 @@
 <template>
-    <default-field :field="field">
+    <default-field :field="field" :full-width-content="field.fullWidth">
         <template slot="field">
             <div :class="[errorClasses, errorClasses.length ? 'border' : '']" @keydown.stop>
                 <trumbowyg v-model="value" :config="field.options"></trumbowyg>

resources/js/components/FormField.vue

@@ -16,6 +16,25 @@ class NovaTrumbowyg extends Field
      */
     public $component = 'nova-trumbowyg';
 
+    /**
+     * Set field default size as fullWidth
+     *
+     * @var bool
+     */
+    public $fullWidth = true;
+
+    /**
+     * Set the field width back to Nova's default
+     *
+     * @return $this
+     */
+    public function defaultWidth()
+    {
+        $this->fullWidth = false;
+
+        return $this;
+    }
+
     public function options(array $options = [])
     {
         return $this->withMeta(['options' => $options]);
@@ -30,6 +49,7 @@ public function jsonSerialize()
     {
         return array_merge(parent::jsonSerialize(), [
             'shouldShow' => $this->shouldBeExpanded(),
+            'fullWidth' => $this->fullWidth,
         ]);
     }
 }