Nova 5.0 Support

.gitignore

@@ -9,4 +9,3 @@ phpunit.xml
 .DS_Store
 Thumbs.db
 yarn-error.log
-webpack.mix.js

composer.json

@@ -18,11 +18,15 @@
         }
     ],
     "require": {
-        "php": "^7.3|^8.0",
+        "php": "^8.1",
         "ext-json": "*",
-        "laravel/framework": "^8.0|^9.0|^10.0|^11.0",
-        "laravel/nova": "^4.0",
-        "nova-kit/nova-packages-tool": "^1.3.1"
+        "laravel/nova": "^5.0"
+    },
+    "require-dev": {
+        "laravel/pint": "^1.2",
+        "phpunit/phpunit": "^9.5",
+        "psalm/plugin-laravel": "^2.0",
+        "laravel/nova-devtool": "^1.0"
     },
     "autoload": {
         "psr-4": {
@@ -52,11 +56,7 @@
     },
     "minimum-stability": "dev",
     "prefer-stable": true,
-    "require-dev": {
-        "laravel/pint": "^1.2",
-        "phpunit/phpunit": "^9.5",
-        "psalm/plugin-laravel": "^2.0"
-    },
+
     "scripts": {
         "psalm": "psalm --find-unused-psalm-suppress --output-format=phpstorm",
         "psalm-update-baseline": "psalm --set-baseline=psalm-baseline.xml",

dist/js/field.js.LICENSE.txt

@@ -1,5 +1,5 @@
 /**!
- * Sortable 1.15.0
+ * Sortable 1.15.6
  * @author	RubaXa   <[email protected]>
  * @author	owenm    <[email protected]>
  * @license MIT

package.json

@@ -11,13 +11,13 @@
         "nova:install": "npm --prefix='../../vendor/laravel/nova' ci"
     },
     "devDependencies": {
+        "laravel-nova-devtool": "file:vendor/laravel/nova-devtool",
         "@inertiajs/inertia": "^0.11.0",
         "@vue/babel-plugin-jsx": "^1.1.1",
         "@vue/compiler-sfc": "^3.2.22",
         "@vueform/multiselect": "^2.3.3",
         "browser-sync": "^2.27.10",
         "browser-sync-webpack-plugin": "^2.3.0",
-        "form-backend-validation": "^2.4.0",
         "laravel-mix": "^6.0.41",
         "lodash": "^4.17.21",
         "postcss": "^8.3.11",

resources/js/components/FormGroup.vue

@@ -11,7 +11,7 @@
                         :title="__('Expand')"
                         @click.prevent="expand"
                         v-if="collapsed">
-                        <icon type="plus" class="align-top" width="16" height="16" />
+                        <Icon name="plus" class="align-top" width="16" height="16" />
                     </button>
                     <button
                         dusk="collapse-group"
@@ -20,7 +20,7 @@
                         :title="__('Collapse')"
                         @click.prevent="collapse"
                         v-else>
-                        <icon type="minus" class="align-top" width="16" height="16" />
+                        <Icon name="minus" class="align-top" width="16" height="16" />
                     </button>
 
                     <p class="text-80 grow px-4">
@@ -35,31 +35,31 @@
                             class="group-control btn border-l border-gray-200 dark:border-gray-700 w-8 h-8 block nova-flexible-content-drag-button"
                             :title="__('Drag')"
                             >
-                            <icon type="selector" class="align-top" width="16" height="16" />
+                            <Icon name="selector" class="align-top" width="16" height="16" />
                         </button>
                         <button
                             dusk="move-up-group"
                             type="button"
                             class="group-control btn border-l border-gray-200 dark:border-gray-700 w-8 h-8 block"
                             :title="__('Move up')"
                             @click.prevent="moveUp">
-                            <icon type="arrow-up" class="align-top" width="16" height="16" />
+                            <Icon name="arrow-up" class="align-top" width="16" height="16" />
                         </button>
                         <button
                             dusk="move-down-group"
                             type="button"
                             class="group-control btn border-l border-gray-200 dark:border-gray-700 w-8 h-8 block"
                             :title="__('Move down')"
                             @click.prevent="moveDown">
-                            <icon type="arrow-down" class="align-top" width="16" height="16" />
+                            <Icon name="arrow-down" class="align-top" width="16" height="16" />
                         </button>
                         <button
                             dusk="delete-group"
                             type="button"
                             class="group-control btn border-l border-gray-200 dark:border-gray-700 w-8 h-8 block"
                             :title="__('Delete')"
                             @click.prevent="confirmRemove">
-                            <icon type="trash" width="16" height="16" />
+                            <Icon name="trash" width="16" height="16" />
                         </button>
                         <delete-flexible-content-group-modal
                             v-if="removeMessage"
@@ -92,11 +92,10 @@
 </template>
 
 <script>
-import BehavesAsPanel from 'nova-mixins/BehavesAsPanel';
-import { mapProps } from 'laravel-nova';
+import { mapProps, BehavesAsPanel, Icon } from 'laravel-nova';
 
 export default {
-    mixins: [BehavesAsPanel],
+    mixins: [BehavesAsPanel, Icon],
 
     props: {
         errors: {},

resources/js/components/OriginalDropMenu.vue

@@ -16,7 +16,7 @@
                 </li>
             </ul>
         </div>
-        <default-button
+        <Button
             dusk="toggle-layouts-dropdown-or-add-default"
             type="button"
             tabindex="0"
@@ -25,15 +25,18 @@
             v-if="isBelowLayoutLimits"
         >
             <span>{{ field.button }}</span>
-        </default-button>
+        </Button>
     </div>
 </template>
 
 <script>
+import { Button } from 'laravel-nova-ui'
 
     export default {
         props: ['layouts', 'field', 'resourceName', 'resourceId', 'resource', 'errors', 'limitCounter', 'limitPerLayoutCounter'],
 
+      components: {Button},
+
         emits: ['addGroup'],
 
         data() {

resources/js/components/SearchMenu.vue

@@ -2,14 +2,14 @@
     <div class="w-3/5" v-if="layouts">
         <div v-if="this.limitCounter > 0 || this.limitCounter === null">
             <div v-if="layouts.length === 1">
-                <default-button
+                <Button
                     dusk="toggle-layouts-dropdown-or-add-default"
                     type="button"
                     tabindex="0"
                     @click="toggleLayoutsDropdownOrAddDefault"
                 >
                     <span>{{ field.button }}</span>
-                </default-button>
+                </Button>
             </div>
             <div v-if="layouts.length > 1">
                 <div style="min-width: 300px;">
@@ -34,6 +34,7 @@
 
 <script>
     import Multiselect from '@vueform/multiselect'
+    import { Button } from 'laravel-nova-ui'
 
     export default {
         props: ['layouts', 'field', 'resourceName', 'resourceId', 'resource', 'errors', 'limitCounter', 'limitPerLayoutCounter'],
@@ -42,6 +43,7 @@
 
         components: {
             Multiselect,
+          Button
         },
 
         data() {

src/Flexible.php

@@ -250,7 +250,7 @@ protected function registerLayout(LayoutInterface $layout)
      * @param  string|null  $attribute
      * @return void
      */
-    public function resolve($resource, $attribute = null)
+    public function resolve($resource, ?string $attribute = null): void
     {
         $attribute = $attribute ?? $this->attribute;
 
@@ -268,7 +268,7 @@ public function resolve($resource, $attribute = null)
      * @param  string|null  $attribute
      * @return void
      */
-    public function resolveForDisplay($resource, $attribute = null)
+    public function resolveForDisplay($resource, ?string $attribute = null): void
     {
         $attribute = $attribute ?? $this->attribute;
 
@@ -493,7 +493,7 @@ protected function newGroup($layout, $key)
      * @param  \Laravel\Nova\Http\Requests\NovaRequest  $request
      * @return array
      */
-    public function getRules(NovaRequest $request)
+    public function getRules(NovaRequest $request): array
     {
         return parent::getRules($request);
     }
@@ -504,7 +504,7 @@ public function getRules(NovaRequest $request)
      * @param  \Laravel\Nova\Http\Requests\NovaRequest  $request
      * @return array|string
      */
-    public function getCreationRules(NovaRequest $request)
+    public function getCreationRules(NovaRequest $request): array
     {
         return array_merge_recursive(
             parent::getCreationRules($request),
@@ -518,7 +518,7 @@ public function getCreationRules(NovaRequest $request)
      * @param  \Laravel\Nova\Http\Requests\NovaRequest  $request
      * @return array
      */
-    public function getUpdateRules(NovaRequest $request)
+    public function getUpdateRules(NovaRequest $request): array
     {
         return array_merge_recursive(
             parent::getUpdateRules($request),

webpack.mix.js

@@ -0,0 +1,12 @@
+let mix = require('laravel-mix')
+let path = require('path')
+let NovaExtension = require('laravel-nova-devtool')
+
+mix.extend('nova', new NovaExtension())
+
+mix
+    .setPublicPath('dist')
+    .js('resources/js/field.js', 'js')
+    .vue({ version: 3 })
+    .sass('resources/sass/field.scss', 'css')
+    .nova('whitecube/nova-flexible-content');