Merge pull request #58 from MaidenVoyageSoftware/master

Nova v5 Support

Author: luisdalmolin

composer.json

@@ -24,8 +24,7 @@
         "php": "^8.0"
     },
     "require-dev": {
-        "laravel/nova": "^4.2",
-        "orchestra/testbench": "^7.4",
+        "laravel/nova": "^5.0",
         "phpunit/phpunit": "^9.5.10"
     },
     "autoload": {

dist/css/field.css

@@ -1,2 +1 @@
-/* Nova Field CSS */
 

dist/js/field.js

@@ -0,0 +1,7 @@
+/*!
+ * vuex v4.1.0
+ * (c) 2022 Evan You
+ * @license MIT
+ */
+
+/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */

dist/js/field.js.LICENSE.txt

@@ -14,7 +14,6 @@ class NovaExtension {
     webpackPlugins() {
         return new webpack.ProvidePlugin({
             _: 'lodash',
-            Errors: 'form-backend-validation',
         });
     }
 

mix.js

@@ -13,13 +13,14 @@
         "@inertiajs/inertia": "^0.11.0",
         "@vue/babel-plugin-jsx": "^1.1.0",
         "@vue/compiler-sfc": "^3.2.22",
-        "form-backend-validation": "^2.3.3",
         "inflector-js": "^1.0.1",
         "laravel-mix": "^6.0.41",
         "lodash": "^4.17.21",
         "postcss": "^8.3.11",
+        "tailwindcss": "^3.4.19",
+        "uid": "^2.0.2",
         "vue-loader": "^16.8.3",
-        "vuex": "^4.0.2"
-    },
-    "dependencies": {}
+        "vuex": "^4.0.2",
+        "webpack": "5.89.0"
+    }
 }

package.json

@@ -1,3 +1,6 @@
+# Laravel Nova v5
+This package has been forked from kirschbaum-development/nova-inline-select and updated to support Laravel Nova v5.
+
 ![Nova Inline Select banner](https://raw.githubusercontent.com/kirschbaum-development/nova-inline-select/master/screenshots/banner.jpg)
 
 # An inline select field for Nova apps
@@ -24,6 +27,19 @@ This Nova field requires Nova 1.0 or higher.
 
 You can install this package in a Laravel app that uses [Nova](https://nova.laravel.com) via composer:
 
+First, add this to the repositories section of your composer.json file:
+
+```text
+"repositories": [
+    {
+        "type": "git",
+        "url": "https://github.com/MaidenVoyageSoftware/nova-inline-select.git"
+    },
+]
+```
+
+Then, install the package as usual
+
 ```bash
 composer require kirschbaum-development/nova-inline-select
 ```

readme.md

@@ -6,11 +6,11 @@
                     <SelectControl
                         :id="field.uniqueKey"
                         :dusk="field.attribute"
-                        v-model:selected="value"
-                        @change="attemptUpdate"
+                        v-model="value"
+                        @selected="attemptUpdate"
                         @click.stop
                         class="w-full md:w-3/5"
-                        :select-classes="{ 'form-input-border-error': hasError }"
+                        :has-error="hasError"
                         :options="field.options"
                         :disabled="isReadonly"
                     >
@@ -19,14 +19,17 @@
                         </option>
                     </SelectControl>
 
-                    <BasicButton
-                        class="shadow relative ml-2 bg-primary-500 hover:bg-primary-400 active:bg-primary-600 text-white dark:text-gray-900"
+                    <button
+                        type="button"
                         v-if="showUpdateButton"
                         :title="__('Update')"
                         @click.stop="submit"
+                        class="shadow relative ml-2 flex h-9 items-center justify-center rounded-lg px-2 bg-primary-500 hover:bg-primary-400 active:bg-primary-600 text-white dark:text-gray-900"
                     >
-                        <Icon type="play" solid />
-                    </BasicButton>
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-4 w-4">
+                            <path d="M6.3 2.84A1.5 1.5 0 0 0 4 4.11v11.78a1.5 1.5 0 0 0 2.3 1.27l9.34-5.89a1.5 1.5 0 0 0 0-2.54L6.3 2.84Z" />
+                        </svg>
+                    </button>
                 </template>
 
                 <template v-else>

resources/js/components/DetailField.vue

@@ -4,11 +4,11 @@
             <SelectControl
                 :id="field.uniqueKey"
                 :dusk="field.attribute"
-                v-model:selected="value"
-                @change="attemptUpdate"
+                v-model="value"
+                @selected="attemptUpdate"
                 @click.stop
                 class="w-full"
-                :select-classes="{ 'form-input-border-error': hasError }"
+                :has-error="hasError"
                 :options="field.options"
                 :disabled="isReadonly"
             >
@@ -17,14 +17,17 @@
                 </option>
             </SelectControl>
 
-            <BasicButton
-                class="shadow relative ml-2 bg-primary-500 hover:bg-primary-400 active:bg-primary-600 text-white dark:text-gray-900"
+            <button
+                type="button"
                 v-if="showUpdateButton"
                 :title="__('Update')"
                 @click.stop="submit"
+                class="shadow relative ml-2 flex h-9 items-center justify-center rounded-lg px-2 bg-primary-500 hover:bg-primary-400 active:bg-primary-600 text-white dark:text-gray-900"
             >
-                <Icon type="play" solid />
-            </BasicButton>
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-4 w-4">
+                    <path d="M6.3 2.84A1.5 1.5 0 0 0 4 4.11v11.78a1.5 1.5 0 0 0 2.3 1.27l9.34-5.89a1.5 1.5 0 0 0 0-2.54L6.3 2.84Z" />
+                </svg>
+            </button>
         </template>
 
         <template v-else>

resources/js/components/IndexField.vue

@@ -27,12 +27,13 @@ export default {
         async submit() {
             let formData = new FormData();
 
-            formData.append(this.field.attribute, this.value);
+            formData.append(this.field.attribute, this.value ?? '');
             formData.append('_method', 'PUT');
 
             return Nova.request().post(`/nova-api/${this.resourceName}/${this.resourceId}`, formData)
                 .then(() => {
-                    let label = find(this.field.options, option => option.value === this.value).label;
+                    let option = find(this.field.options, option => option.value == this.value);
+                    let label = option ? option.label : this.value;
 
                     Nova.success(`${this.field.name} updated to "${label}"`);
                 }, (response) => {
@@ -43,10 +44,18 @@ export default {
                 });
         },
 
-        attemptUpdate(value) {
-            this.value = value;
+        attemptUpdate(optionOrEvent) {
+            /*
+             * Nova v5's SelectControl emits `@selected` with the selected option object.
+             * Fall back to reading a native event target (older behaviour) just in case.
+             */
+            if (optionOrEvent?.target) {
+                this.value = optionOrEvent.target.value;
+            } else if (optionOrEvent != null && optionOrEvent.value !== undefined) {
+                this.value = optionOrEvent.value;
+            }
 
-            if (this.field.indexTwoStepDisabled ?? false) {
+            if (this.twoStepDisabled) {
                 return this.submit();
             }