├── .github
    └── FUNDING.yml
├── .gitignore
├── LICENSE
├── README.md
├── composer.json
├── dist
    ├── css
    │   └── field.css
    ├── fonts
    │   └── vendor
    │   │   └── element-ui
    │   │       └── lib
    │   │           └── theme-chalk
    │   │               ├── element-icons.ttf
    │   │               └── element-icons.woff
    ├── js
    │   └── field.js
    └── mix-manifest.json
├── package.json
├── resources
    ├── js
    │   ├── components
    │   │   ├── IndexField.vue
    │   │   └── _partials
    │   │   │   └── Button.vue
    │   └── field.js
    └── sass
    │   └── field.scss
├── screenshots
    ├── 1.png
    ├── 2.png
    └── 3.gif
├── src
    ├── FieldServiceProvider.php
    └── NovaQuickView.php
└── webpack.mix.js


/.github/FUNDING.yml:
--------------------------------------------------------------------------------
 1 | # These are supported funding model platforms
 2 | 
 3 | github: PHPJunior
 4 | patreon: # Replace with a single Patreon username
 5 | open_collective: # Replace with a single Open Collective username
 6 | ko_fi: # Replace with a single Ko-fi username
 7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
 8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
 9 | liberapay: nyinyilwin
10 | issuehunt: # Replace with a single IssueHunt username
11 | otechie: # Replace with a single Otechie username
12 | custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']
13 | 


--------------------------------------------------------------------------------
/.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 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2020 Nyi Nyi Lwin
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Nova Quick View
 2 | [![Latest Stable Version](https://poser.pugx.org/php-junior/nova-quick-view/v/stable)](https://packagist.org/packages/php-junior/nova-quick-view)
 3 | [![Total Downloads](https://poser.pugx.org/php-junior/nova-quick-view/downloads)](https://packagist.org/packages/php-junior/nova-quick-view)
 4 | 
 5 | ![screenshot 1](screenshots/1.png)
 6 | ![screenshot 2](screenshots/2.png)
 7 | ![screenshot 3](screenshots/3.gif)
 8 | 
 9 | ## Installation
10 | You can install the package in to a Laravel app that uses [Nova](https://nova.laravel.com) via composer:
11 | 
12 | ```bash
13 | composer require php-junior/nova-quick-view
14 | ```
15 | 
16 | ## Usage
17 | Add the following code :
18 | 
19 | ```php
20 | public function fields(Request $request)
21 | {
22 |     return [
23 |         ...
24 |         NovaQuickView::make('Hello', function () {
25 |             return '<p>Hi, there!</p>';
26 |         })
27 |         ->icon('el-icon-search')
28 |         ->title('I am the title')
29 |         ->direction('rtl') rtl / ltr / ttb / btt
30 |         ...
31 |     ];
32 | }
33 | ```
34 | 
35 | If you need to render HTML content :
36 | ```php
37 | public function fields(Request $request)
38 | {
39 |     return [
40 |         ...
41 |         NovaQuickView::make('Hello', function () {
42 |             return view('partials.hello', [
43 |                 'text' => 'Hi, there!'
44 |             ])->render();
45 |         })
46 |         ->icon('el-icon-search')
47 |         ->title('I am the title')
48 |         ->direction('rtl') // rtl / ltr / ttb / btt
49 |         ...
50 |     ];
51 | }
52 | ```
53 | Please check icon list from [element](https://element.eleme.io/#/en-US/component/icon).
54 | If you want to use fontawesome or others, import CSS file in `layout.blade.php` 
55 | 
56 | ## Credits
57 | - All Contributors
58 | 
59 | ## License
60 | The MIT License (MIT). Please see [License File](LICENSE) for more information.
61 | 


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


--------------------------------------------------------------------------------
/dist/css/field.css:
--------------------------------------------------------------------------------
1 | @import url(https://unpkg.com/element-ui/lib/theme-chalk/index.css);
2 | 
3 | 


--------------------------------------------------------------------------------
/dist/fonts/vendor/element-ui/lib/theme-chalk/element-icons.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PHPJunior/nova-quick-view/c31acfda5caed91ea201bc4c4b4caeb61f47042c/dist/fonts/vendor/element-ui/lib/theme-chalk/element-icons.ttf


--------------------------------------------------------------------------------
/dist/fonts/vendor/element-ui/lib/theme-chalk/element-icons.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PHPJunior/nova-quick-view/c31acfda5caed91ea201bc4c4b4caeb61f47042c/dist/fonts/vendor/element-ui/lib/theme-chalk/element-icons.woff


--------------------------------------------------------------------------------
/dist/mix-manifest.json:
--------------------------------------------------------------------------------
1 | {
2 |     "/js/field.js": "/js/field.js",
3 |     "/css/field.css": "/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 |         "element-ui": "^2.14.1",
19 |         "vue": "^2.5.0"
20 |     }
21 | }
22 | 


--------------------------------------------------------------------------------
/resources/js/components/IndexField.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div>
 3 |         <button
 4 |             @click="drawer = true"
 5 |             class="appearance-none cursor-pointer text-70 hover:text-primary mr-3 drawer-button" style="height: 20px"
 6 |             v-tooltip.click="__(field.tooltip)"
 7 |         >
 8 |             <i :class="field.icon" style="font-size: 20px"></i>
 9 |         </button>
10 |         <el-drawer
11 |             :title="field.title"
12 |             :visible.sync="drawer"
13 |             :direction="field.direction"
14 |             :with-header="header"
15 |         >
16 |             <div v-html="field.value" />
17 |         </el-drawer>
18 |     </div>
19 | </template>
20 | 
21 | <script>
22 | 
23 | export default {
24 |     props: ['resourceName', 'field'],
25 |     data() {
26 |         return {
27 |             drawer: false,
28 |         };
29 |     },
30 |     computed: {
31 |         header () {
32 |             return !!this.field.title;
33 |         }
34 |     },
35 |     methods: {
36 |         appendButton() {
37 |             let td = this.$el.parentElement;
38 |             td.style.padding = "0px";
39 |             td.style.minWidth = "0px";
40 |             let tr = td.parentElement;
41 |             let btn = td.querySelector('button.drawer-button')
42 |             let el = tr.querySelector('div.inline-flex.items-center')
43 |             el.prepend(btn)
44 |         }
45 |     },
46 |     mounted() {
47 |         this.appendButton();
48 |     }
49 | }
50 | </script>
51 | 


--------------------------------------------------------------------------------
/resources/js/components/_partials/Button.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | <button @click="openDrawer" class="appearance-none cursor-pointer text-70 hover:text-primary mr-3" style="height: 20px">
 3 |     <i :class="icon" style="font-size: 20px"></i>
 4 | </button>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |     name: "Button",
10 |     props: ['icon', 'nova', 'ref'],
11 |     methods: {
12 |         openDrawer () {
13 |             this.nova.$emit(this.ref, true)
14 |         }
15 |     }
16 | }
17 | </script>
18 | 
19 | <style scoped>
20 | 
21 | </style>
22 | 


--------------------------------------------------------------------------------
/resources/js/field.js:
--------------------------------------------------------------------------------
1 | import ElementUI from 'element-ui';
2 | 
3 | Nova.booting((Vue, router, store) => {
4 |   Vue.use(ElementUI);
5 |   Vue.component('index-nova-quick-view', require('./components/IndexField'))
6 | })
7 | 


--------------------------------------------------------------------------------
/resources/sass/field.scss:
--------------------------------------------------------------------------------
1 | @import url('https://unpkg.com/element-ui/lib/theme-chalk/index.css');
2 | 


--------------------------------------------------------------------------------
/screenshots/1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PHPJunior/nova-quick-view/c31acfda5caed91ea201bc4c4b4caeb61f47042c/screenshots/1.png


--------------------------------------------------------------------------------
/screenshots/2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PHPJunior/nova-quick-view/c31acfda5caed91ea201bc4c4b4caeb61f47042c/screenshots/2.png


--------------------------------------------------------------------------------
/screenshots/3.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PHPJunior/nova-quick-view/c31acfda5caed91ea201bc4c4b4caeb61f47042c/screenshots/3.gif


--------------------------------------------------------------------------------
/src/FieldServiceProvider.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | namespace PhpJunior\NovaQuickView;
 4 | 
 5 | use Illuminate\Support\ServiceProvider;
 6 | use Laravel\Nova\Events\ServingNova;
 7 | use Laravel\Nova\Nova;
 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('nova-quick-view', __DIR__.'/../dist/js/field.js');
20 |             Nova::style('nova-quick-view', __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/NovaQuickView.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | namespace PhpJunior\NovaQuickView;
 4 | 
 5 | use Laravel\Nova\Fields\Field;
 6 | 
 7 | class NovaQuickView extends Field
 8 | {
 9 |     /**
10 |      * The field's component.
11 |      *
12 |      * @var string
13 |      */
14 |     public $component = 'nova-quick-view';
15 | 
16 |     /**
17 |      * NovaQuickView constructor.
18 |      *
19 |      * @param string $name
20 |      * @param string|null $attribute
21 |      * @param mixed|null $resolveCallback
22 |      */
23 |     public function __construct(string $name, $attribute = null, $resolveCallback = null)
24 |     {
25 |         parent::__construct(null, $attribute, $resolveCallback);
26 |         $this->onlyOnIndex();
27 |         $this->withMeta([
28 |             'tooltip' => $name,
29 |             'icon' => 'el-icon-search',
30 |             'direction' => 'rtl'
31 |         ]);
32 |     }
33 | 
34 |     /**
35 |      * @param $icon
36 |      * @return NovaQuickView
37 |      */
38 |     public function icon($icon)
39 |     {
40 |         return $this->withMeta([
41 |             'icon' => $icon
42 |         ]);
43 |     }
44 | 
45 |     /**
46 |      * @param $title
47 |      * @return NovaQuickView
48 |      */
49 |     public function title($title)
50 |     {
51 |         return $this->withMeta([
52 |             'title' => $title
53 |         ]);
54 |     }
55 | 
56 |     /**
57 |      * @param $direction
58 |      * @return NovaQuickView
59 |      */
60 |     public function direction($direction)
61 |     {
62 |         return $this->withMeta([
63 |             'direction' => $direction
64 |         ]);
65 |     }
66 | }
67 | 


--------------------------------------------------------------------------------
/webpack.mix.js:
--------------------------------------------------------------------------------
1 | let mix = require('laravel-mix')
2 | 
3 | mix
4 |   .setPublicPath('dist')
5 |   .js('resources/js/field.js', 'js')
6 |   .sass('resources/sass/field.scss', 'css')
7 | 


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