Add extraClasses() field for customization of badges

README.md

@@ -1,12 +1,17 @@
 # Laravel Nova Badge Field
 
-Simple Laravel Nova Badge field.  It extends the `Select` field and allows a simple mapping of colors to values to display a "Badge" in the index.
+Works with Nova 4!
+
+---
+
+This is a simple Laravel Nova Badge field. It extends the `Select` field and allows a simple mapping of colors to values to
+display a "Badge" on the index and details pages.  Can be customized with tailwind classes
 
 ### Details Page
 
 ![details page select](https://cdn-pro.dprcdn.net/files/acc_465612/S5MDqi)
 
-### Index 
+### Index
 
 ![index badge](https://cdn-pro.dprcdn.net/files/acc_465612/gibgjD)
 
@@ -18,8 +23,16 @@ You can install the package in to a Laravel app that uses [Nova](https://nova.la
 composer require timothyasp/nova-badge-field
 ```
 
+For Nova v1 - v3 support, use `"timothyasp/nova-badge-field": "^1.04"` in your `composer.json`
+
 ## Usage
 
+In addition to any of the `Select` field options and presentation methods, here are a few `Badge` specific
+customizations this package provides.
+
+To customize the text color of the badge, set the `color` attribute on the option. If there isn't an option set, it
+defaults to setting the background color and the text color is set to a contrasting white/black color based on the
+brightness of the background.
 
 ```
 use Timothyasp\Badge\Badge;
@@ -37,47 +50,43 @@ Badge::make('Field')
    ]);
 ```
 
-If you want to set the text color of the badge, set the color attribute on the option.  If there isn't an option set, it defaults to setting the background color and the text color is set to a contrasting white/black color based on the brightness of the background. 
+If you prefer to use the `label` as the display text on the index and detail pages, you can use
+the `->displayUsingLabels()` option.
 
 ```
 use Timothyasp\Badge\Badge;
 
 $options = [
-    'option1' => 'Option 1',
-    'option2' => 'Option 2'
+  'Option 1' => 1,
+  'Option 2' => 2
 ];
 
 Badge::make('Field')
    ->options($options)
    ->colors([
-      'option1' => [
-          'background' => '#ffffff',
-          'color' => '#000000'
-      ],
-      'option2' => '#000000'
-   ]);
+      'Option 1' => '#ffffff',
+      'Option 2' => '#000000'
+   ])->displayUsingLabels();
 ```
 
-If you prefer to use the `label` on the index and detail pages, you can use the `->displayUsingLabels()` option.
+Finally, if you need even more customization on the badge display, use the `extraClasses` method to pass along any
+additional Tailwind classes to customize the appearance of the `Badge`.  
+
+This is useful if you'd like to customize the badges to be stacking instead of inline, when using the `Stack` field. 
 
 ```
 use Timothyasp\Badge\Badge;
 
 $options = [
-  'option1' => 'Option 1',
-  'option2' => 'Option 2'
+    'option1' => 'Option 1',
+    'option2' => 'Option 2'
 ];
 
 Badge::make('Field')
-   ->options($options)
-   ->colors([
-      'option1' => '#ffffff',
-      'option2' => '#000000'
-   ])->displayUsingLabels();
+    ->options($options)
+    ->extraClasses('mr-2 text-4xl flex');
 ```
 
-
-
 ## Credits
 
 - [Timothy Asp](https://github.com/timothyasp)

resources/js/components/DetailField.vue

@@ -2,6 +2,7 @@
     <PanelItem :index="index" :field="field" :field-name="field.name">
         <template #value>
             <span class="rounded-full uppercase px-2 py-1 text-xs font-bold whitespace-no-wrap"
+                  :class="badgeExtraClasses"
                   :style="{ backgroundColor: backgroundColor(), color: textColor() }"
             >{{ __(displayValue()) }}</span>
         </template>
@@ -13,6 +14,6 @@
     import display from '../mixins/display';
     export default {
         props: ['index', 'resource', 'resourceName', 'resourceId', 'field'],
-        mixins: [colors, display]
+        mixins: [colors, display],
     }
 </script>

resources/js/components/IndexField.vue

@@ -1,6 +1,7 @@
 <template>
     <span class="rounded-full uppercase px-2 py-1 text-xs font-bold whitespace-no-wrap"
-          :style="{ backgroundColor: backgroundColor(), color: textColor() }"
+        :class="badgeExtraClasses"
+        :style="{ backgroundColor: backgroundColor(), color: textColor() }"
     >{{ __(displayValue()) }}</span>
 </template>
 

resources/js/mixins/display.js

@@ -1,4 +1,13 @@
 export default {
+    computed: {
+        badgeExtraClasses: function() {
+            if (!this.field.extraClasses) {
+                return {foo: false};
+            }
+
+            return {[this.field.extraClasses]: true};
+        }
+    },
     methods: {
         displayValue: function () {
             if (this.field.useLabel) {

src/Badge.php

@@ -6,27 +6,39 @@
 
 class Badge extends Select
 {
+
     /**
      * The field's component.
      *
      * @var string
      */
     public $component = 'badge';
 
+
     /**
      * Map of values to colors to be used as badge colors.
      *
      * @param $map
+     *
      * @return Badge
      */
     public function colors($map)
     {
-        return $this->withMeta(['colorMap' => $map]);
+        return $this->withMeta([ 'colorMap' => $map ]);
     }
 
+
     public function displayUsingLabels()
     {
-        $this->withMeta(['useLabel' => true]);
+        $this->withMeta([ 'useLabel' => true ]);
+
+        return $this;
+    }
+
+
+    public function extraClasses($extraClasses = '')
+    {
+        $this->withMeta([ 'extraClasses' => $extraClasses]);
 
         return $this;
     }