Add support for custom width

Flatroy · Dec 9, 2022 · a65adfa · a65adfa
1 parent d7d2534
commit a65adfa
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -119,6 +119,20 @@ public function cards(NovaRequest $request)
 }
 ```
 
+### Custom width (small, medium or large)
+
+```php
+public function cards(NovaRequest $request)
+{
+    return [
+        FieldProgressbar::make('Awesomeness')
+            ->options([
+                'width' => 'medium',
+            ]),
+    ];
+}
+```
+
 Feel free to come with suggestions for improvements.
 
 Packages based on this package: [nova-progressbar-field](https://github.com/signifly/nova-progressbar-field) by [Signifly](https://github.com/signifly)
diff --git a/dist/js/field.js b/dist/js/field.js
diff --git a/dist/mix-manifest.json b/dist/mix-manifest.json
@@ -1,3 +1,3 @@
 {
     "/js/field.js": "/js/field.js"
-}
+}
diff --git a/resources/js/components/IndexField.vue b/resources/js/components/IndexField.vue
@@ -1,9 +1,16 @@
 <template>
+  <div class="w-full" :class="padding">
     <span class="pg-bar" ref="chartContainer"></span>
+  </div>
 </template>
 
 <script>
     const ProgressBar = require('progressbar.js');
+    const widthSizes = {
+      large: '',
+      medium: 'px-6',
+      small: 'px-10'
+    }
 
     export default {
         props: ['resourceName', 'field'],
@@ -19,6 +26,7 @@
                     sub: null,
                     animateColor: false,
                 },
+                padding: ''
             };
         },
         mounted: function () {
@@ -36,6 +44,7 @@
                     this.drawLine();
                     break;
             }
+            this.padding = widthSizes[this.options.width] ?? widthSizes.full;
         },
         methods: {
             drawLine() {