Merge pull request #16 from uwpsych/nova-4-support

Nova 4 support

Author: lptn

README.md

@@ -46,7 +46,6 @@ public function cards()
  - Styling
     - `->center(false)`: Center card's content. `false` by default.
     - `->withoutCardStyles(true)`: Whether to use standard Nova Card styles for a card (background, padding, etc). `false` by default.
-    - `->forceFullWidth(true)`: Force the card to be full width. A fix for [nova cards order](https://github.com/laravel/nova-issues/issues/1895).
 
 
 ## Why this package?

composer.json

@@ -12,7 +12,7 @@
     "license": "MIT",
     "require": {
         "php": ">=8.0",
-        "laravel/nova": "^3.0"
+        "laravel/nova": "^4.0"
     },
     "require-dev": {
         "mockery/mockery": "^1.4",

dist/js/card.js

@@ -1,3 +1,3 @@
 {
-    "/js/card.js": "/js/card.js?id=b29fdbc6a04f01db20f0"
-}
+    "/js/card.js": "/js/card.js?id=591c45f787ce8b18b6c3724b2c083b88"
+}

dist/mix-manifest.json

@@ -0,0 +1,33 @@
+const mix = require('laravel-mix')
+const webpack = require('webpack')
+const path = require('path')
+
+class NovaExtension {
+  name() {
+    return 'nova-extension'
+  }
+
+  register(name) {
+    this.name = name
+  }
+
+  webpackConfig(webpackConfig) {
+    webpackConfig.externals = {
+      vue: 'Vue',
+    }
+
+    webpackConfig.resolve.alias = {
+      ...(webpackConfig.resolve.alias || {}),
+      'laravel-nova': path.join(
+        __dirname,
+        '../../vendor/laravel/nova/resources/js/mixins/packages.js'
+      ),
+    }
+
+    webpackConfig.output = {
+      uniqueName: this.name,
+    }
+  }
+}
+
+mix.extend('nova', new NovaExtension())

nova.mix.js

@@ -5,18 +5,18 @@
     },
     "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-mix": "^6.0",
+        "vue-loader": "^16.8.3"
     },
     "dependencies": {
-        "vue": "^2.5.0"
+        "vue": "^3.0.0"
     }
 }

package.json

@@ -1,3 +1,5 @@
-Nova.booting((Vue, router, store) => {
-  Vue.component('html-card', require('./components/Card'))
+import Card from './components/Card'
+
+Nova.booting((app, store) => {
+  app.component('html-card', Card)
 })

resources/js/card.js

@@ -4,12 +4,12 @@
         </div>
     </div>
 
-    <card v-else class="htmlCard" :class="cardClassList">
+    <Card v-else class="htmlCard" :class="cardClassList">
         <div class="px-3 py-3">
             <div v-html="card.content" class="htmlCard__content">
             </div>
         </div>
-    </card>
+    </Card>
 </template>
 
 <script>
@@ -27,19 +27,10 @@
                 return classes;
             },
         },
-        mounted() {
-            if (this.card.forceFullWidth) {
-                this.$parent.$el.classList.remove('w-5/6');
-                this.$parent.$el.classList.add('w-full');
-            }
-        },
     }
 </script>
 
 <style>
-    .htmlCard {
-        height: auto;
-    }
     .htmlCard__content > p:not(:last-child) {
         margin-bottom: 1em;
     }

resources/js/components/Card.vue

@@ -24,7 +24,6 @@ public function __construct($component = null)
         $this->withMeta([
             'center' => false,
             'withoutCardStyles' => false,
-            'forceFullWidth' => false,
             'content' => '',
         ]);
     }
@@ -67,18 +66,6 @@ public function center(bool $centerContent = true): static
         return $this->withMeta(['center' => $centerContent]);
     }
 
-    /**
-     * Force Nova to apply full width for a card.
-     * Nova has undocumented feature to auto-order cards based on width and put
-     * full-width cards at the bottom. If you want to display full-width cards
-     * not at the end, you should use with=1/3 or 2/3 and this method.
-     * @see https://github.com/laravel/nova-issues/issues/1895#issuecomment-543684472
-     */
-    public function forceFullWidth(bool $forceFullWidth = true): static
-    {
-        return $this->withMeta(['forceFullWidth' => $forceFullWidth]);
-    }
-
     /** Whether to use standard Nova Card styles for a card (background, padding, etc). */
     public function withoutCardStyles(bool $withoutStyles = true): static
     {

src/HtmlCard.php

@@ -1,8 +1,12 @@
 let mix = require('laravel-mix')
 
+require('./nova.mix')
+
 mix
-    .setPublicPath('dist')
-    .js('resources/js/card.js', 'js')
+  .setPublicPath('dist')
+  .js('resources/js/card.js', 'js')
+  .vue({ version: 3 })
+  .nova('interaction-design-foundation/nova-html-card')
 
 if (mix.inProduction()) {
     mix.version();