├── .gitignore
├── README.md
├── composer.json
├── dist
    ├── css
    │   └── field.css
    └── js
    │   └── field.js
├── mix-manifest.json
├── package.json
├── resources
    ├── js
    │   ├── components
    │   │   ├── DetailField.vue
    │   │   └── IndexField.vue
    │   └── field.js
    └── sass
    │   └── field.scss
├── src
    ├── FieldServiceProvider.php
    └── Html.php
└── webpack.mix.js


/.gitignore:
--------------------------------------------------------------------------------
 1 | /.idea
 2 | /vendor
 3 | /node_modules
 4 | package-lock.json
 5 | composer.phar
 6 | composer.lock
 7 | phpunit.xml
 8 | .phpunit.result.cache
 9 | .DS_Store
10 | Thumbs.db
11 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Laravel Nova HTML View Field 
 2 | 
 3 | **Since Nova now includes `asHtml()` Meta on the Text field (as of [v1.0.9](https://github.com/laravel/nova-issues/issues/280)), there is no more need for this package as same functionality can be achieved with core Text field.**
 4 | 
 5 | This field allows you display custom HTML in Laravel Nova, be it a link, an image or any other piece of proper html.
 6 | 
 7 | ## Installation
 8 | 
 9 | Install the package into a Laravel app that uses [Nova](https://nova.laravel.com) with Composer:
10 | 
11 | ```bash
12 | composer require treestoneit/html
13 | ```
14 | 
15 | ## Usage
16 | 
17 | Add the field to your resource in the ```fields``` method:
18 | 
19 | ```php
20 | use Treestoneit\Html\Html;
21 | ...
22 | ...
23 | Html::make('Track',function (){
24 |                 $link = "<a class='text-70' target='_blank' href='$this->tracking_link'>";
25 |                 $link .= "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"18\" class='fill-current' viewBox=\"0 0 20 20\"><path d=\"M9.26 13a2 2 0 0 1 .01-2.01A3 3 0 0 0 9 5H5a3 3 0 0 0 0 6h.08a6.06 6.06 0 0 0 0 2H5A5 5 0 0 1 5 3h4a5 5 0 0 1 .26 10zm1.48-6a2 2 0 0 1-.01 2.01A3 3 0 0 0 11 15h4a3 3 0 0 0 0-6h-.08a6.06 6.06 0 0 0 0-2H15a5 5 0 0 1 0 10h-4a5 5 0 0 1-.26-10z\"/></svg>";
26 |                 $link .= "</a>";
27 |                 return $link;
28 |             })
29 | ```
30 | 
31 | If you have proper html saved in the database or cast by your model to HTML
32 | 
33 | ```php
34 | use Treestoneit\Html\Html;
35 | ...
36 | ...
37 | Html::make('Your Field Label','your_field')
38 | ```
39 | 
40 | Please note: _Only Index and Detail version of the field is configured_
41 | 


--------------------------------------------------------------------------------
/composer.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "treestoneit/html",
 3 |     "description": "A Laravel Nova Html View field.",
 4 |     "keywords": [
 5 |         "laravel",
 6 |         "nova"
 7 |     ],
 8 |     "license": "MIT",
 9 |     "require": {
10 |         "php": ">=7.1.0"
11 |     },
12 |     "autoload": {
13 |         "psr-4": {
14 |             "Treestoneit\\Html\\": "src/"
15 |         }
16 |     },
17 |     "extra": {
18 |         "laravel": {
19 |             "providers": [
20 |                 "Treestoneit\\Html\\FieldServiceProvider"
21 |             ]
22 |         }
23 |     },
24 |     "config": {
25 |         "sort-packages": true
26 |     },
27 |     "minimum-stability": "dev",
28 |     "prefer-stable": true
29 | }
30 | 


--------------------------------------------------------------------------------
/dist/css/field.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/treeStoneIT/nova-html/c519d04f0618fc69287c28a2e5078d03640856cd/dist/css/field.css


--------------------------------------------------------------------------------
/dist/js/field.js:
--------------------------------------------------------------------------------
1 | !function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:r})},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=1)}([function(e,t){e.exports=function(e,t,n,r,o,i){var s,u=e=e||{},l=typeof e.default;"object"!==l&&"function"!==l||(s=e,u=e.default);var c,a="function"==typeof u?u.options:u;if(t&&(a.render=t.render,a.staticRenderFns=t.staticRenderFns,a._compiled=!0),n&&(a.functional=!0),o&&(a._scopeId=o),i?(c=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),r&&r.call(this,e),e&&e._registeredComponents&&e._registeredComponents.add(i)},a._ssrRegister=c):r&&(c=r),c){var f=a.functional,d=f?a.render:a.beforeCreate;f?(a._injectStyles=c,a.render=function(e,t){return c.call(t),d(e,t)}):a.beforeCreate=d?[].concat(d,c):[c]}return{esModule:s,exports:u,options:a}}},function(e,t,n){n(2),e.exports=n(9)},function(e,t,n){Nova.booting(function(e,t){e.component("index-html",n(3)),e.component("detail-html",n(6))})},function(e,t,n){var r=n(0)(n(4),n(5),!1,null,null,null);e.exports=r.exports},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default={props:["resourceName","field"]}},function(e,t){e.exports={render:function(){var e=this.$createElement;return(this._self._c||e)("div",{domProps:{innerHTML:this._s(this.field.value)}})},staticRenderFns:[]}},function(e,t,n){var r=n(0)(n(7),n(8),!1,null,null,null);e.exports=r.exports},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default={props:["resource","resourceName","resourceId","field"]}},function(e,t){e.exports={render:function(){var e=this.$createElement,t=this._self._c||e;return t("panel-item",{attrs:{field:this.field}},[t("template",{slot:"value"},[this.field.value?t("div",{staticClass:"text-90",domProps:{innerHTML:this._s(this.field.value)}}):t("p",[this._v("—")])])],2)},staticRenderFns:[]}},function(e,t){}]);


--------------------------------------------------------------------------------
/mix-manifest.json:
--------------------------------------------------------------------------------
1 | {
2 |     "/dist/js/field.js": "/dist/js/field.js",
3 |     "/dist/css/field.css": "/dist/css/field.css"
4 | }


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "private": true,
 3 |     "scripts": {
 4 |         "dev": "npm run development",
 5 |         "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
 6 |         "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",
 7 |         "watch-poll": "npm run watch -- --watch-poll",
 8 |         "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",
 9 |         "prod": "npm run production",
10 |         "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
11 |     },
12 |     "devDependencies": {
13 |         "cross-env": "^5.0.0",
14 |         "laravel-mix": "^1.0",
15 |         "laravel-nova": "^1.0"
16 |     },
17 |     "dependencies": {
18 |         "vue": "^2.5.0"
19 |     }
20 | }
21 | 


--------------------------------------------------------------------------------
/resources/js/components/DetailField.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <panel-item :field="field">
 3 |         <template slot="value">
 4 |             <div v-if="field.value" v-html="field.value" class="text-90"></div>
 5 |             <p v-else>&mdash;</p>
 6 |         </template>
 7 |     </panel-item>
 8 | </template>
 9 | 
10 | <script>
11 | export default {
12 |     props: ['resource', 'resourceName', 'resourceId', 'field'],
13 | }
14 | </script>
15 | 


--------------------------------------------------------------------------------
/resources/js/components/IndexField.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div v-html="field.value"></div>
 3 | </template>
 4 | 
 5 | <script>
 6 | export default {
 7 |     props: ['resourceName', 'field'],
 8 | }
 9 | </script>
10 | 


--------------------------------------------------------------------------------
/resources/js/field.js:
--------------------------------------------------------------------------------
1 | Nova.booting((Vue, router) => {
2 |     Vue.component('index-html', require('./components/IndexField'));
3 |     Vue.component('detail-html', require('./components/DetailField'));
4 | })
5 | 


--------------------------------------------------------------------------------
/resources/sass/field.scss:
--------------------------------------------------------------------------------
1 | // Nova Tool CSS
2 | 


--------------------------------------------------------------------------------
/src/FieldServiceProvider.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | namespace Treestoneit\Html;
 4 | 
 5 | use Laravel\Nova\Nova;
 6 | use Laravel\Nova\Events\ServingNova;
 7 | use Illuminate\Support\ServiceProvider;
 8 | 
 9 | class FieldServiceProvider extends ServiceProvider
10 | {
11 |     /**
12 |      * Bootstrap any application services.
13 |      *
14 |      * @return void
15 |      */
16 |     public function boot()
17 |     {
18 |         Nova::serving(function (ServingNova $event) {
19 |             Nova::script('html', __DIR__.'/../dist/js/field.js');
20 |             Nova::style('html', __DIR__.'/../dist/css/field.css');
21 |         });
22 |     }
23 | 
24 |     /**
25 |      * Register any application services.
26 |      *
27 |      * @return void
28 |      */
29 |     public function register()
30 |     {
31 |         //
32 |     }
33 | }
34 | 


--------------------------------------------------------------------------------
/src/Html.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | namespace Treestoneit\Html;
 4 | 
 5 | use Laravel\Nova\Fields\Field;
 6 | 
 7 | class Html extends Field
 8 | {
 9 |     /**
10 |      * The field's component.
11 |      *
12 |      * @var string
13 |      */
14 |     public $component = 'html';
15 | 
16 |     /**
17 |      * Indicates if the element should be shown on the edit pages.
18 |      *
19 |      * @var bool
20 |      */
21 |     public $showOnCreation = false;
22 |     public $showOnUpdate = false;
23 | }
24 | 


--------------------------------------------------------------------------------
/webpack.mix.js:
--------------------------------------------------------------------------------
 1 | let mix = require('laravel-mix')
 2 | 
 3 | mix.js('resources/js/field.js', 'dist/js')
 4 |    .sass('resources/sass/field.scss', 'dist/css')
 5 |     .webpackConfig({
 6 |         resolve: {
 7 |             symlinks: false
 8 |         }
 9 |     })
10 | 


--------------------------------------------------------------------------------