initial commit

.gitignore

@@ -0,0 +1,10 @@
+/.idea
+/vendor
+/node_modules
+package-lock.json
+composer.phar
+composer.lock
+phpunit.xml
+.phpunit.result.cache
+.DS_Store
+Thumbs.db

README.md

@@ -0,0 +1,78 @@
+# Laravel Nova URL Field
+A URL input and link field for Laravel Nova
+
+[![Latest Version on Packagist](https://img.shields.io/packagist/v/inspheric/nova-url-field.svg?style=flat-square)](https://packagist.org/packages/inspheric/nova-url-field)
+[![Total Downloads](https://img.shields.io/packagist/dt/inspheric/nova-url-field.svg?style=flat-square)](https://packagist.org/packages/inspheric/nova-url-field)
+
+## Installation
+
+Install the package into a Laravel app that uses [Nova](https://nova.laravel.com) with Composer:
+
+```bash
+composer require inspheric/nova-url-field
+```
+
+## Usage
+
+Add the field to your resource in the ```fields``` method:
+```php
+use Inspheric\Fields\Url;
+
+Url::make('Url')
+    ->rules('url', /* ... */),
+```
+
+The field extends the `Laravel\Nova\Fields\Text` field, so all the usual methods are available.
+
+It is recommended that you include the standard `url` and/or `active_url` validation rules, as they are not automatically added.
+
+### Options
+#### Label
+Make the field display with a label instead of the URL value itself on the detail or index pages:
+
+```php
+Url::make('Url')
+    ->label('External Link'),
+```
+
+#### Clickable
+Make the field display as a link on the detail page:
+
+```php
+Url::make('Url')
+    ->clickable(),
+```
+
+#### Clickable on Index
+Make the field display as a link on the index page:
+
+```php
+Url::make('Url')
+    ->clickableOnIndex(),
+```
+
+## Appearance
+### Index (default)
+![index-field](https://raw.githubusercontent.com/inspheric/nova-url-field/master/docs/index-field.png)
+
+The field is displayed as a plain `<span>` element.
+
+### Index (clickable)
+![index-field-clickable](https://raw.githubusercontent.com/inspheric/nova-url-field/master/docs/index-field-clickable.png)
+
+The field is displayed as an `<a href="...">` element with an icon.
+
+### Detail (default)
+![detail-field](https://raw.githubusercontent.com/inspheric/nova-url-field/master/docs/detail-field-plain.png)
+
+The field is displayed as a plain `<span>` element.
+
+### Detail (clickable)
+![detail-field-clickable](https://raw.githubusercontent.com/inspheric/nova-url-field/master/docs/detail-field-clickable.png)
+
+The field is displayed as an `<a href="...">` element with an icon.
+
+### Form
+![form-field](https://raw.githubusercontent.com/inspheric/nova-url-field/master/docs/form-field.png)
+
+The field is displayed as an `<input type="email">` element.

composer.json

@@ -0,0 +1,32 @@
+{
+    "name": "inspheric/nova-url-field",
+    "description": "A Laravel Nova url field.",
+    "keywords": [
+        "laravel",
+        "nova",
+        "field",
+        "url",
+        "href"
+    ],
+    "license": "MIT",
+    "require": {
+        "php": ">=7.1.0"
+    },
+    "autoload": {
+        "psr-4": {
+            "Inspheric\\Fields\\": "src/"
+        }
+    },
+    "extra": {
+        "laravel": {
+            "providers": [
+                "Inspheric\\Fields\\UrlFieldServiceProvider"
+            ]
+        }
+    },
+    "config": {
+        "sort-packages": true
+    },
+    "minimum-stability": "dev",
+    "prefer-stable": true
+}

mix-manifest.json

@@ -0,0 +1,3 @@
+{
+    "/dist/js/field.js": "/dist/js/field.js"
+}

package.json

@@ -0,0 +1,20 @@
+{
+    "private": true,
+    "scripts": {
+        "dev": "npm run development",
+        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
+        "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
+        "watch-poll": "npm run watch -- --watch-poll",
+        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
+        "prod": "npm run production",
+        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
+    },
+    "devDependencies": {
+        "cross-env": "^5.0.0",
+        "laravel-mix": "^1.0",
+        "laravel-nova": "^1.0"
+    },
+    "dependencies": {
+        "vue": "^2.5.0"
+    }
+}

resources/js/components/DetailField.vue

@@ -0,0 +1,19 @@
+<template>
+    <panel-item :field="field">
+        <template slot="value">
+            <url-field :field="field" :clickable="field.clickable"></url-field>
+        </template>
+    </panel-item>
+</template>
+
+<script>
+import Url from './Url'
+
+export default {
+    props: ['resource', 'resourceName', 'resourceId', 'field'],
+
+    components: {
+        'url-field': Url
+    }
+}
+</script>

resources/js/components/FormField.vue

@@ -0,0 +1,49 @@
+<template>
+    <default-field :field="field">
+        <template slot="field">
+            <input :id="field.name" type="url"
+                class="w-full form-control form-input form-input-bordered"
+                :class="errorClasses"
+                :placeholder="field.name"
+                v-model="value"
+            />
+
+            <p v-if="hasError" class="my-2 text-danger">
+                {{ firstError }}
+            </p>
+        </template>
+    </default-field>
+</template>
+
+<script>
+import { FormField, HandlesValidationErrors } from 'laravel-nova'
+
+export default {
+    mixins: [FormField, HandlesValidationErrors],
+
+    props: ['resourceName', 'resourceId', 'field'],
+
+    methods: {
+        /*
+         * Set the initial, internal value for the field.
+         */
+        setInitialValue() {
+          this.value = this.field.value || ''
+        },
+
+        /**
+         * Fill the given FormData object with the field's internal value.
+         */
+        fill(formData) {
+          formData.append(this.field.attribute, this.value || '')
+        },
+
+        /**
+         * Update the field's internal value.
+         */
+        handleChange(value) {
+          this.value = value
+        }
+    }
+}
+</script>

resources/js/components/IndexField.vue

@@ -0,0 +1,15 @@
+<template>
+    <url-field :field="field" :clickable="field.clickableOnIndex"></url-field>
+</template>
+
+<script>
+import Url from './Url'
+
+export default {
+    props: ['resourceName', 'field'],
+
+    components: {
+        'url-field': Url
+    }
+}
+</script>

resources/js/components/Url.vue

@@ -0,0 +1,32 @@
+<template>
+        <div>
+            <a :href="field.value"
+                :title="field.value"
+                v-if="field.value && clickable"
+                class="cursor-pointer dim no-underline text-primary inline-flex items-center"
+                target="_blank"
+            >
+                <svg xmlns="http://www.w3.org/2000/svg"
+                    class="fill-current mr-2"
+                    width="16"
+                    height="16"
+                    viewBox="0 0 24 24"
+                    role="presentation"
+                >
+                    <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"/>
+                </svg>
+
+                <span>
+                    {{ field.label ? field.label : field.value }}
+                </span>
+            </a>
+            <span v-else-if="field.value">{{ field.value }}</span>
+            <span v-else>&mdash;</span>
+        </div>
+</template>
+
+<script>
+export default {
+    props: ['resource', 'resourceName', 'resourceId', 'field', 'clickable'],
+}
+</script>

resources/js/field.js

@@ -0,0 +1,5 @@
+Nova.booting((Vue, router) => {
+    Vue.component('index-url-field', require('./components/IndexField'));
+    Vue.component('detail-url-field', require('./components/DetailField'));
+    Vue.component('form-url-field', require('./components/FormField'));
+})

src/Url.php

@@ -0,0 +1,51 @@
+<?php
+
+namespace Inspheric\Fields;
+
+use Laravel\Nova\Fields\Text;
+
+class Url extends Text
+{
+    /**
+     * The field's component.
+     *
+     * @var string
+     */
+    public $component = 'url-field';
+
+    /**
+     * Whether the email should be displayed as a clickable
+     * link on the detail page.
+     *
+     * @param  string $label
+     * @return $this
+     */
+    public function label(string $label = null)
+    {
+        return $this->withMeta(['label' => $label]);
+    }
+
+    /**
+     * Whether the email should be displayed as a clickable
+     * link on the detail page.
+     *
+     * @param  bool $clickable
+     * @return $this
+     */
+    public function clickable(bool $clickable = true)
+    {
+        return $this->withMeta(['clickable' => $clickable]);
+    }
+
+    /**
+     * Whether the email should be displayed as a clickable
+     * mailto link on the index page.
+     *
+     * @param  bool $clickable
+     * @return $this
+     */
+    public function clickableOnIndex(bool $clickable = true)
+    {
+        return $this->withMeta(['clickableOnIndex' => $clickable]);
+    }
+}

src/UrlFieldServiceProvider.php

@@ -0,0 +1,32 @@
+<?php
+
+namespace Inspheric\Fields;
+
+use Laravel\Nova\Nova;
+use Laravel\Nova\Events\ServingNova;
+use Illuminate\Support\ServiceProvider;
+
+class UrlFieldServiceProvider extends ServiceProvider
+{
+    /**
+     * Bootstrap any application services.
+     *
+     * @return void
+     */
+    public function boot()
+    {
+        Nova::serving(function (ServingNova $event) {
+            Nova::script('url', __DIR__.'/../dist/js/field.js');
+        });
+    }
+
+    /**
+     * Register any application services.
+     *
+     * @return void
+     */
+    public function register()
+    {
+        //
+    }
+}

webpack.mix.js

@@ -0,0 +1,8 @@
+let mix = require('laravel-mix')
+
+mix.js('resources/js/field.js', 'dist/js')
+    .webpackConfig({
+        resolve: {
+            symlinks: false
+        }
+    })