Merge pull request #64 from kirschbaum-development/feature/nova-4-mig…

…ration

NOVA 4 update

.github/workflows/ci.yml

@@ -0,0 +1,33 @@
+on: push
+name: CI
+
+jobs:
+  phpunit:
+    runs-on: ubuntu-latest
+    container:
+      image: kirschbaumdevelopment/laravel-test-runner:8.0
+
+    services:
+      mysql:
+        image: mysql:5.7
+        env:
+          MYSQL_ROOT_PASSWORD: password
+          MYSQL_DATABASE: test
+        ports:
+          - 33306:3306
+        options: --health-cmd="mysqladmin ping" --health-interval=10s --health-timeout=5s --health-retries=3
+
+    steps:
+    - uses: actions/checkout@v1
+      with:
+        fetch-depth: 1
+
+    - name: Configure composer for Nova
+      run: composer config 'http-basic.nova.laravel.com' '${{ secrets.NOVA_USERNAME }}' '${{ secrets.NOVA_LICENSE_KEY }}'
+
+    - name: Install composer dependencies
+      run: |
+        composer install --prefer-dist --no-interaction --no-scripts
+
+    - name: Run Testsuite
+      run: vendor/bin/phpunit tests/

.gitignore

@@ -8,3 +8,5 @@ phpunit.xml
 .phpunit.result.cache
 .DS_Store
 Thumbs.db
+auth.json
+

composer.json

@@ -8,13 +8,21 @@
     ],
     "license": "MIT",
     "require": {
-        "php": ">=7.1.0"
+        "php": "^8.0"
     },
+    "repositories": [
+        {
+            "type": "composer",
+            "url": "https://nova.laravel.com"
+        }
+    ],
     "require-dev": {
         "doctrine/dbal": "^2.12",
+        "laravel/legacy-factories": "^1.3",
+        "laravel/nova": "^4.2",
         "mockery/mockery": "^1.1",
-        "orchestra/testbench": "^3.8",
-        "phpunit/phpunit": "^7.5"
+        "orchestra/testbench": "^7.4",
+        "phpunit/phpunit": "^9.5.10"
     },
     "autoload": {
         "psr-4": {

dist/css/field.css

@@ -1 +1 @@
-fieldset[disabled] .multiselect{pointer-events:none}.multiselect__spinner{position:absolute;right:1px;top:1px;width:48px;height:35px;background:#fff;display:block}.multiselect__spinner:after,.multiselect__spinner:before{position:absolute;content:"";top:50%;left:50%;margin:-8px 0 0 -8px;width:16px;height:16px;border-radius:100%;border:2px solid transparent;border-top-color:#41b883;-webkit-box-shadow:0 0 0 1px transparent;box-shadow:0 0 0 1px transparent}.multiselect__spinner:before{-webkit-animation:spinning 2.4s cubic-bezier(.41,.26,.2,.62);animation:spinning 2.4s cubic-bezier(.41,.26,.2,.62);-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.multiselect__spinner:after{-webkit-animation:spinning 2.4s cubic-bezier(.51,.09,.21,.8);animation:spinning 2.4s cubic-bezier(.51,.09,.21,.8);-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.multiselect__loading-enter-active,.multiselect__loading-leave-active{-webkit-transition:opacity .4s ease-in-out;transition:opacity .4s ease-in-out;opacity:1}.multiselect__loading-enter,.multiselect__loading-leave-active{opacity:0}.multiselect,.multiselect__input,.multiselect__single{font-family:inherit;font-size:16px;-ms-touch-action:manipulation;touch-action:manipulation}.multiselect{-webkit-box-sizing:content-box;box-sizing:content-box;display:block;position:relative;width:100%;min-height:40px;text-align:left;color:#35495e}.multiselect *{-webkit-box-sizing:border-box;box-sizing:border-box}.multiselect:focus{outline:none}.multiselect--disabled{background:#ededed;pointer-events:none;opacity:.6}.multiselect--active{z-index:50}.multiselect--active:not(.multiselect--above) .multiselect__current,.multiselect--active:not(.multiselect--above) .multiselect__input,.multiselect--active:not(.multiselect--above) .multiselect__tags{border-bottom-left-radius:0;border-bottom-right-radius:0}.multiselect--active .multiselect__select{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.multiselect--above.multiselect--active .multiselect__current,.multiselect--above.multiselect--active .multiselect__input,.multiselect--above.multiselect--active .multiselect__tags{border-top-left-radius:0;border-top-right-radius:0}.multiselect__input,.multiselect__single{position:relative;display:inline-block;min-height:20px;line-height:20px;border:none;border-radius:5px;background:#fff;padding:0 0 0 5px;width:100%;-webkit-transition:border .1s ease;transition:border .1s ease;-webkit-box-sizing:border-box;box-sizing:border-box;margin-bottom:8px;vertical-align:top}.multiselect__input:-ms-input-placeholder{color:#35495e}.multiselect__input::-webkit-input-placeholder{color:#35495e}.multiselect__input::-moz-placeholder{color:#35495e}.multiselect__input::-ms-input-placeholder{color:#35495e}.multiselect__input::placeholder{color:#35495e}.multiselect__tag~.multiselect__input,.multiselect__tag~.multiselect__single{width:auto}.multiselect__input:hover,.multiselect__single:hover{border-color:#cfcfcf}.multiselect__input:focus,.multiselect__single:focus{border-color:#a8a8a8;outline:none}.multiselect__single{padding-left:5px;margin-bottom:8px}.multiselect__tags-wrap{display:inline}.multiselect__tags{min-height:40px;display:block;padding:8px 40px 0 8px;border-radius:5px;border:1px solid #e8e8e8;background:#fff;font-size:14px}.multiselect__tag{position:relative;display:inline-block;padding:4px 26px 4px 10px;border-radius:5px;margin-right:10px;color:#fff;line-height:1;background:#41b883;margin-bottom:5px;white-space:nowrap;overflow:hidden;max-width:100%;text-overflow:ellipsis}.multiselect__tag-icon{cursor:pointer;margin-left:7px;position:absolute;right:0;top:0;bottom:0;font-weight:700;font-style:normal;width:22px;text-align:center;line-height:22px;-webkit-transition:all .2s ease;transition:all .2s ease;border-radius:5px}.multiselect__tag-icon:after{content:"\D7";color:#266d4d;font-size:14px}.multiselect__tag-icon:focus,.multiselect__tag-icon:hover{background:#369a6e}.multiselect__tag-icon:focus:after,.multiselect__tag-icon:hover:after{color:#fff}.multiselect__current{min-height:40px;overflow:hidden;padding:8px 30px 0 12px;white-space:nowrap;border-radius:5px;border:1px solid #e8e8e8}.multiselect__current,.multiselect__select{line-height:16px;-webkit-box-sizing:border-box;box-sizing:border-box;display:block;margin:0;text-decoration:none;cursor:pointer}.multiselect__select{position:absolute;width:40px;height:38px;right:1px;top:1px;padding:4px 8px;text-align:center;-webkit-transition:-webkit-transform .2s ease;transition:-webkit-transform .2s ease;transition:transform .2s ease;transition:transform .2s ease,-webkit-transform .2s ease}.multiselect__select:before{position:relative;right:0;top:65%;color:#999;margin-top:4px;border-color:#999 transparent transparent;border-style:solid;border-width:5px 5px 0;content:""}.multiselect__placeholder{color:#adadad;display:inline-block;margin-bottom:10px;padding-top:2px}.multiselect--active .multiselect__placeholder{display:none}.multiselect__content-wrapper{position:absolute;display:block;background:#fff;width:100%;max-height:240px;overflow:auto;border:1px solid #e8e8e8;border-top:none;border-bottom-left-radius:5px;border-bottom-right-radius:5px;z-index:50;-webkit-overflow-scrolling:touch}.multiselect__content{list-style:none;display:inline-block;padding:0;margin:0;min-width:100%;vertical-align:top}.multiselect--above .multiselect__content-wrapper{bottom:100%;border-bottom-left-radius:0;border-bottom-right-radius:0;border-top-left-radius:5px;border-top-right-radius:5px;border-bottom:none;border-top:1px solid #e8e8e8}.multiselect__content::webkit-scrollbar{display:none}.multiselect__element{display:block}.multiselect__option{display:block;padding:12px;min-height:40px;line-height:16px;text-decoration:none;text-transform:none;vertical-align:middle;position:relative;cursor:pointer;white-space:nowrap}.multiselect__option:after{top:0;right:0;position:absolute;line-height:40px;padding-right:12px;padding-left:20px;font-size:13px}.multiselect__option--highlight{background:#41b883;outline:none;color:#fff}.multiselect__option--highlight:after{content:attr(data-select);background:#41b883;color:#fff}.multiselect__option--selected{background:#f3f3f3;color:#35495e;font-weight:700}.multiselect__option--selected:after{content:attr(data-selected);color:silver}.multiselect__option--selected.multiselect__option--highlight{background:#ff6a6a;color:#fff}.multiselect__option--selected.multiselect__option--highlight:after{background:#ff6a6a;content:attr(data-deselect);color:#fff}.multiselect--disabled .multiselect__current,.multiselect--disabled .multiselect__select{background:#ededed;color:#a6a6a6}.multiselect__option--disabled{background:#ededed!important;color:#a6a6a6!important;cursor:text;pointer-events:none}.multiselect__option--group{background:#ededed;color:#35495e}.multiselect__option--group.multiselect__option--highlight{background:#35495e;color:#fff}.multiselect__option--group.multiselect__option--highlight:after{background:#35495e}.multiselect__option--disabled.multiselect__option--highlight{background:#dedede}.multiselect__option--group-selected.multiselect__option--highlight{background:#ff6a6a;color:#fff}.multiselect__option--group-selected.multiselect__option--highlight:after{background:#ff6a6a;content:attr(data-deselect);color:#fff}.multiselect-enter-active,.multiselect-leave-active{-webkit-transition:all .15s ease;transition:all .15s ease}.multiselect-enter,.multiselect-leave-active{opacity:0}.multiselect__strong{margin-bottom:8px;line-height:20px;display:inline-block;vertical-align:top}[dir=rtl] .multiselect{text-align:right}[dir=rtl] .multiselect__select{right:auto;left:1px}[dir=rtl] .multiselect__tags{padding:8px 8px 0 40px}[dir=rtl] .multiselect__content{text-align:right}[dir=rtl] .multiselect__option:after{right:auto;left:0}[dir=rtl] .multiselect__clear{right:auto;left:12px}[dir=rtl] .multiselect__spinner{right:auto;left:1px}@-webkit-keyframes spinning{0%{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(2turn);transform:rotate(2turn)}}@keyframes spinning{0%{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(2turn);transform:rotate(2turn)}}
+

dist/js/field.js.LICENSE.txt

@@ -0,0 +1,30 @@
+/*!
+ * @kurkle/color v0.2.1
+ * https://github.com/kurkle/color#readme
+ * (c) 2022 Jukka Kurkela
+ * Released under the MIT License
+ */
+
+/*!
+ * Chart.js v3.9.1
+ * https://www.chartjs.org
+ * (c) 2022 Chart.js Contributors
+ * Released under the MIT License
+ */
+
+/*!
+ * The buffer module from node.js, for the browser.
+ *
+ * @author   Feross Aboukhadijeh <http://feross.org>
+ * @license  MIT
+ */
+
+/*!
+ * vuex v4.1.0
+ * (c) 2022 Evan You
+ * @license MIT
+ */
+
+/*! ieee754. BSD-3-Clause License. Feross Aboukhadijeh <https://feross.org/opensource> */
+
+/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */

dist/mix-manifest.json

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

mix.js

@@ -0,0 +1,40 @@
+const mix = require("laravel-mix");
+const webpack = require("webpack");
+const path = require("path");
+
+class NovaExtension {
+    name() {
+        return "nova-extension";
+    }
+
+    register(name) {
+        this.name = name;
+    }
+
+    webpackPlugins() {
+        return new webpack.ProvidePlugin({
+            _: "lodash",
+            Errors: "form-backend-validation",
+        });
+    }
+
+    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());

package.json

@@ -2,22 +2,29 @@
     "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"
+        "@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",
+        "vue-loader": "^16.8.3",
+        "vuex": "^4.0.2"
     },
     "dependencies": {
-        "vue": "^2.5.0",
-        "chart.js": "^2.8.0",
-        "vue-chartjs": "^3.4.2",
-        "vue-multiselect": "^2.1.6"
+        "chart.js": "^3.7.0",
+        "vue": "^3.2.47",
+        "vue-chartjs": "^4",
+        "vue-multiselect": "^3.0.0-beta.1"
     }
 }

phpunit.xml.dist

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<phpunit bootstrap="vendor/autoload.php"
+         backupGlobals="false"
+         backupStaticAttributes="false"
+         colors="true"
+         verbose="true"
+         convertErrorsToExceptions="true"
+         convertNoticesToExceptions="true"
+         convertWarningsToExceptions="true"
+         processIsolation="false"
+         stopOnFailure="false">
+    <testsuites>
+        <testsuite name="NovaChart Js Test Suite">
+            <directory>tests</directory>
+        </testsuite>
+    </testsuites>
+    <filter>
+        <whitelist>
+            <directory suffix=".php">src/</directory>
+        </whitelist>
+    </filter>
+</phpunit>

resources/js/components/ChartjsBarChart.vue

@@ -1,31 +1,32 @@
-<script>
-    import { Bar, mixins } from 'vue-chartjs'
-    import charts from "../mixins/charts";
+<template>
+    <Bar
+        :chartData="chartData"
+        :chartOptions="settings.options"
+        :width="settings.width"
+        :height="settings.height"
+    />
+</template>
 
-    const {reactiveData} = mixins;
+<script>
+import { Bar } from "vue-chartjs";
+import "chart.js/auto";
+import charts from "../mixins/charts";
 
-    export default {
-        extends: Bar,
+export default {
+    name: "ChartjsBarChart",
+    components: { Bar },
+    mixins: [charts],
 
-        mixins: [reactiveData, charts],
+    props: {
+        dataset: Array,
+        additionalDatasets: Array,
+        settings: Object,
+    },
 
-        props: {
-            'dataset': Array,
-            'additionalDatasets': Array,
-            'settings': Object,
+    computed: {
+        chartData() {
+            return this.createChartDataset();
         },
-
-        mounted () {
-            this.chartData = this.createChartDataset();
-            //we need to set options manually as options are used to re-render chart when data changes in reactiveData/reactiveProp mixin
-            this.options = this.settings.options;
-            this.renderChart(this.chartData, this.options);
-        },
-
-        watch: {
-            dataset: function() {
-                this.chartData = this.createChartDataset();
-            }
-        }
-    }
+    },
+};
 </script>

resources/js/components/ChartjsLineChart.vue

@@ -1,31 +1,32 @@
-<script>
-    import { Line, mixins } from 'vue-chartjs'
-    import charts from "../mixins/charts";
+<template>
+    <Line
+        :chartData="chartData"
+        :chartOptions="settings.options"
+        :width="settings.width"
+        :height="settings.height"
+    />
+</template>
 
-    const {reactiveData} = mixins;
+<script>
+import { Line } from "vue-chartjs";
+import "chart.js/auto";
+import charts from "../mixins/charts";
 
-    export default {
-        extends: Line,
+export default {
+    name: "ChartjsLineChart",
+    components: { Line },
+    mixins: [charts],
 
-        mixins: [reactiveData, charts],
+    props: {
+        dataset: Array,
+        additionalDatasets: Array,
+        settings: Object,
+    },
 
-        props: {
-            'dataset': Array,
-            'additionalDatasets': Array,
-            'settings': Object,
+    computed: {
+        chartData() {
+            return this.createChartDataset();
         },
-
-        mounted () {
-            this.chartData = this.createChartDataset();
-            //we need to set options manually as options are used to re-render chart when data changes in reactiveData/reactiveProp mixin
-            this.options = this.settings.options;
-            this.renderChart(this.chartData, this.options);
-        },
-
-        watch: {
-            dataset: function() {
-                this.chartData = this.createChartDataset();
-            }
-        }
-    }
+    },
+};
 </script>