Merge pull request #3 from mdpoulter/icon-support

Add icon support

README.md

@@ -44,7 +44,20 @@ Link::make('Charge Id', 'stripe_id')
                 ->text("Go To Stripe")
 ```
 
-#### Open link in blank window
+### Show icon instead of text
+Replaces text with an icon on the index view. For this needs you can use `icon()` function
+
+Example: 
+``` 
+Link::make('Charge Id', 'stripe_id')
+                ->url(function () {
+                    return "https://dashboard.stripe.com/payments/{$this->stripe_id}";
+                })
+                ->text("Go To Stripe")
+                ->icon()
+```
+
+### Open link in blank window
 For this needs you can use `blank()` function.
 
 Example: 
@@ -56,7 +69,7 @@ Link::make('Charge Id', 'stripe_id')
                 ->blank()
 ```
 
-#### Add additional classes to `<a>`
+### Add additional classes to `<a>`
 For this needs you can use `classes()` function (accept `Callable` or `text`). 
 
 Example: 
@@ -68,5 +81,5 @@ Link::make('Charge Id', 'stripe_id')
 ```
 
 
-### TODO
+## TODO
 - [ ] Cover field with tests

composer.json

@@ -7,7 +7,8 @@
     ],
     "license": "MIT",
     "require": {
-        "php": ">=7.1.0"
+        "php": ">=7.1.0",
+        "laravel/nova": "^2.1"
     },
     "autoload": {
         "psr-4": {

resources/js/components/Icons/ExternalLink.vue

@@ -0,0 +1,3 @@
+<template functional>
+    <path d="M19 6.41L8.7 16.71a1 1 0 1 1-1.4-1.42L17.58 5H14a1 1 0 0 1 0-2h6a1 1 0 0 1 1 1v6a1 1 0 0 1-2 0V6.41zM17 14a1 1 0 0 1 2 0v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7c0-1.1.9-2 2-2h5a1 1 0 0 1 0 2H5v12h12v-5z" />
+</template>

resources/js/components/IndexField.vue

@@ -1,9 +1,12 @@
 <template>
-    <a v-if="hasValue" :target="field.blank ? field.blank : '_self'" :class="field.classes ? field.classes : defaultClasses"
-       :href="field.href">
-        {{ field.text ? field.text : field.value }}
-    </a>
-    <p v-else>&mdash;</p>
+    <div :class="`text-${field.textAlign}`">
+        <a v-if="hasValue" :target="field.blank ? field.blank : '_self'" :class="field.classes ? field.classes : defaultClasses"
+           :href="field.href">
+            <span v-if="field.icon"><icon :type="field.icon" height="24" view-box="0 0 24 24" width="24"/></span>
+            <span v-else>{{ field.text ? field.text : field.value }}</span>
+        </a>
+        <p v-else>&mdash;</p>
+    </div>
 </template>
 
 <script>

resources/js/field.js

@@ -2,4 +2,5 @@ Nova.booting((Vue, router, store) => {
     Vue.component('index-nova-link-field', require('./components/IndexField'))
     Vue.component('detail-nova-link-field', require('./components/DetailField'))
     Vue.component('form-nova-link-field', require('./components/FormField'))
+    Vue.component('icon-external-link', require('./components/Icons/ExternalLink'))
 })

src/NovaLinkField.php

@@ -65,6 +65,21 @@ public function text($text)
         return $this;
     }
 
+    /**
+     * @param  string  $icon
+     * @return $this
+     */
+    public function icon($icon = 'external-link')
+    {
+        $this->withMeta([
+            'icon'      => $icon,
+        ]);
+
+        $this->textAlign('center');
+
+        return $this;
+    }
+
     /**
      * @return array
      */