Merge pull request #26 from RobertoNegro/master

Update laravel mix 6, resource fields taken from the specific resource on update instead of empty generic one, allow custom colors

README.md

@@ -12,11 +12,16 @@ composer require royduin/laravel-nova-field-dynamic-select
 
 ## Usage
 
-Class has 4 special methods on top of default Select from Laravel Nova.
+Class has 5 special methods on top of default Select from Laravel Nova.
 - `dependsOn` can take a list of other fields this one depends on. On initial page load the list will be null, so make sure to check for null before accessing.
 - `default` can take a list of other fields this one depends on.
 - `options` can be either an array or a callable.
 - `forAction` to indicate that the dynamic select is running in an action.
+- `colors` (optional) to choose which colors to use when highlighting options. Accepts an array with 4 different hexadecimal colors: 
+  - `highlightBgColor`: Color of the background when the cursor is over an option
+  - `highlightTextColor`: Color of the text when the cursor is over an option
+  - `selectedHighlightBgColor`: Color of the background when the cursor is over a selected option
+  - `selectedHighlightTextColor`: Color of the text when the cursor is over a selected option
 
 
 If its a callable, it will receive array with selected dependency values as first argument and should return an array of items to be shown on the select field.
@@ -33,6 +38,12 @@ public function fields(Request $request)
         DynamicSelect::make('Country', 'country')
             ->options(['US' => 'United States', 'UK' => 'United Kingdom'])
             ->rules('required')
+            ->colors([
+                'highlightBgColor' => '#0f0',
+                'highlightTextColor' => '#fff',
+                'selectedHighlightBgColor' => '#f00',
+                'selectedHighlightTextColor' => '#fff',
+            ])
         ,
 
         DynamicSelect::make('Provider', 'provider')

dist/css/field.css

@@ -0,0 +1 @@
+

dist/js/field.js.LICENSE.txt

@@ -0,0 +1,15 @@
+/*!
+ * Determine if an object is a Buffer
+ *
+ * @author   Feross Aboukhadijeh <https://feross.org>
+ * @license  MIT
+ */
+
+/**
+ * @license
+ * Lodash <https://lodash.com/>
+ * Copyright OpenJS Foundation and other contributors <https://openjsf.org/>
+ * Released under MIT license <https://lodash.com/license>
+ * Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
+ * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
+ */

dist/mix-manifest.json

@@ -1,4 +1,4 @@
 {
     "/js/field.js": "/js/field.js",
     "/css/field.css": "/css/field.css"
-}
+}

package.json

@@ -2,20 +2,24 @@
     "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",
+        "development": "mix",
+        "watch": "mix watch",
+        "watch-poll": "mix watch -- --watch-options-poll=1000",
+        "hot": "mix watch --hot",
         "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"
+        "production": "mix --production"
     },
     "devDependencies": {
-        "cross-env": "^5.0.0",
-        "laravel-mix": "^1.0",
-        "laravel-nova": "^1.0"
+        "laravel-mix": "^6.0.43",
+        "laravel-nova": "^1.12.3",
+        "resolve-url-loader": "^5.0.0",
+        "sass": "^1.50.1",
+        "sass-loader": "^12.6.0",
+        "vue-loader": "^15.9.8",
+        "vue-template-compiler": "^2.6.14"
     },
     "dependencies": {
-        "vue": "^2.5.0",
-        "vue-multiselect": "^2.1.0"
+        "vue-multiselect": "^2.1.4",
+        "vue": "^2.6.14"
     }
 }

resources/js/components/FormField.vue

@@ -14,8 +14,12 @@
                 :deselectLabel="field.deselectLabel"
                 :selectedLabel="field.selectedLabel"
                 :loading="isLoading"
-                @input="onChange">
-            </multiselect>
+                @input="onChange"
+                :style="`--multiselect-highlight-bg: ${field.highlightBgColor};
+                         --multiselect-highlight-text: ${field.highlightTextColor};
+                         --multiselect-selected-highlight-bg: ${field.selectedHighlightBgColor};
+                         --multiselect-selected-highlight-text: ${field.selectedHighlightTextColor};`"
+            ></multiselect>
         </template>
     </default-field>
 </template>
@@ -155,7 +159,7 @@ export default {
             }
 
             this.isLoading = true;
-            const resp = (await Nova.request().post("/nova-vendor/dynamic-select/options/"+this.resourceName, {
+            const resp = (await Nova.request().post("/nova-vendor/dynamic-select/options/"+this.resourceName+(this.resourceId ? ('/'+this.resourceId) : ''), {
                 attribute: this.field.originalAttribute ? this.field.originalAttribute : this.removeFlexibleContentPrefix(this.field.attribute),
                 depends: this.getDependValues(dependsOnValue.value, originalDependsOnAttribute),
                 action: this.field.action,
@@ -198,4 +202,12 @@ export default {
     .multiselect__select:before {
         content: none !important;
     }
+    .multiselect__option--selected.multiselect__option--highlight, .multiselect__option--selected.multiselect__option--highlight:after {
+      background: var(--multiselect-selected-highlight-bg);
+      color: var(--multiselect-selected-highlight-text);
+    }
+    .multiselect__option--highlight, .multiselect__option--highlight:after {
+      background: var(--multiselect-highlight-bg);
+      color: var(--multiselect-highlight-text);
+    }
 </style>

resources/js/field.js

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

routes/api.php

@@ -14,4 +14,4 @@
 |
 */
 
-Route::post('/options/{resource}', 'OptionsController@index');
+Route::post('/options/{resource}/{resourceId?}', 'OptionsController@index');

src/DynamicSelect.php

@@ -20,6 +20,12 @@ class DynamicSelect extends Field
     public $labelKey;
     public $multiselect = false;
     public $action = null;
+    public $colors = [
+        'highlightBgColor' => '#41b883',
+        'highlightTextColor' => '#fff',
+        'selectedHighlightBgColor' => '#ff6a6a',
+        'selectedHighlightTextColor' => '#fff',
+    ];
 
     public function resolve($resource, $attribute = null)
     {
@@ -107,6 +113,18 @@ public function multiselect($multiselect = true)
         return $this;
     }
 
+    /**
+     * Set the colors
+     * @param array{highlightBgColor: string, highlightTextColor: string, selectedHighlightBgColor: string, selectedHighlightTextColor: string} $colors
+     * @return $this
+     */
+    public function colors(array $colors)
+    {
+        $this->colors = array_merge($this->colors, $colors ?? []);
+
+        return $this;
+    }
+
     public function labelKey($labelKey)
     {
         $this->labelKey = $labelKey;
@@ -133,7 +151,11 @@ public function meta()
             'selectedLabel' => __('Selected'),
             'labelKey' => $this->labelKey,
             'multiselect' => $this->multiselect,
-            'action' => $this->action
+            'action' => $this->action,
+            'highlightBgColor' => $this->colors['highlightBgColor'] ?? '#41b883',
+            'highlightTextColor' => $this->colors['highlightTextColor'] ?? '#fff',
+            'selectedHighlightBgColor' => $this->colors['selectedHighlightBgColor'] ?? '#ff6a6a',
+            'selectedHighlightTextColor' => $this->colors['selectedHighlightTextColor'] ?? '#fff',
         ], $this->meta);
     }
 }

src/Http/Controllers/OptionsController.php

@@ -34,7 +34,11 @@ public function index(NovaRequest $request)
     }
 
     private function getFieldFromResource(NovaRequest $request, $attribute) {
-        $resource = $request->newResource();
+        $resource = $request->newResourceWith(
+            ($request->resourceId
+                ? $request->findModelQuery()->first()
+                : null) ?? $request->model()
+        );
 
         $field = null;
 

webpack.mix.js

@@ -1,5 +1,12 @@
 let mix = require('laravel-mix')
 
-mix.setPublicPath('dist')
-   .js('resources/js/field.js', 'js')
-   .sass('resources/sass/field.scss', 'css')
+mix
+    .setPublicPath('dist')
+    .js('resources/js/field.js', 'js')
+    .vue({ version: 2 })
+    .sass('resources/sass/field.scss', 'css')
+    .webpackConfig({
+        externals: {
+            Vue: 'vue',
+        },
+    })