Upgrade to V4

composer.json

@@ -1,13 +1,15 @@
 {
     "name": "davidpiesse/nova-toggle",
-    "description": "A Boolean Toggle Switch Field",
+    "description": "A Laravel Nova Toggle field.",
     "keywords": [
         "laravel",
-        "nova"
+        "nova",
+        "toggle",
+        "field"
     ],
     "license": "MIT",
     "require": {
-        "php": ">=7.1.0"
+        "php": "^7.3|^8.0"
     },
     "autoload": {
         "psr-4": {

dist/js/field.js.LICENSE.txt

@@ -0,0 +1,5 @@
+/*!
+ * vuex v4.0.2
+ * (c) 2021 Evan You
+ * @license MIT
+ */

dist/mix-manifest.json

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

nova.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,
+        '../nova4/vendor/laravel/nova/resources/js/mixins/packages.js'
+      ),
+    }
+
+    webpackConfig.output = {
+      uniqueName: this.name,
+    }
+  }
+}
+
+mix.extend('nova', new NovaExtension())

package.json

@@ -1,21 +1,25 @@
 {
-    "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",
-        "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"
-    },
-    "devDependencies": {
-        "cross-env": "^5.0.0",
-        "laravel-mix": "^1.0",
-        "laravel-nova": "^1.0"
-    },
-    "dependencies": {
-        "vue": "^2.5.0",
-        "vue-js-toggle-button": "^1.3.0"
-    }
+  "private": true,
+  "scripts": {
+    "dev": "npm run development",
+    "development": "mix",
+    "watch": "mix watch",
+    "watch-poll": "mix watch -- --watch-options-poll=1000",
+    "hot": "mix watch --hot",
+    "prod": "npm run production",
+    "production": "mix --production",
+    "nova:install": "npm --prefix='../../vendor/laravel/nova' ci"
+  },
+  "devDependencies": {
+    "@vue/compiler-sfc": "^3.2.22",
+    "form-backend-validation": "^2.3.3",
+    "laravel-mix": "^6.0.41",
+    "lodash": "^4.17.21",
+    "postcss": "^8.3.11",
+    "tailwindcss": "^3.1.6",
+    "vue-loader": "^16.8.3"
+  },
+  "dependencies": {
+    "@headlessui/vue": "^1.6.7"
+  }
 }

postcss.config.js

@@ -0,0 +1 @@
+module.exports = {}

readme.md

@@ -16,13 +16,7 @@ The Toggle has all the same options as the Boolean field so you can set the valu
 use Davidpiesse\NovaToggle\Toggle;
 ```
 
-```php
-Toggle::make('Active')
-    ->trueValue('On')
-    ->falseValue('Off')
-```
-
-In addition you can set visual parameters
+You can set visual parameters
 
 ### Labels
 You can show both, or each state label
@@ -41,38 +35,3 @@ Toggle::make('Active')
     ->falseLabel('Nah Dawg')
 ```
 The defaults are 'True' and 'False'
-
-
-### Size
-You can set the width and height. Setting the width will auto scale the height, but you can override this with ->height().
-Defaults are 60 (px) and 26 (px) 
-```php
-Toggle::make('Active')
-    ->width(80)
-    ->height(45) //To override scaling
-```
-
-
-### Colors
-You can set wither or both of the background colours for the Toggle. By default True is the Nova 'Success Green' [ var(--success) ] and false is a Grey 60 [ var(--60) ]
-```php
-Toggle::make('Active')
-    ->trueColor('pink')
-    ->falseColor('#fcfcfc')
-```
-
-### Speed
-You can set the animation speed in ms with
-```php
-Toggle::make('Active')
-    ->speed(500)
-```
-The default is 300ms
-
-
-### Toggle on index
-You can activate the toggle on index as well with
-```php
-Toggle::make('Active')
-    ->editableIndex()
-```

resources/css/field.css

@@ -0,0 +1,4 @@
+
+/* @tailwind base; */
+@tailwind components;
+@tailwind utilities;

resources/js/components/DetailField.vue

@@ -1,31 +1,33 @@
 <template>
-    <panel-item :field="field">
-        <p slot="value" class="text-90">
-            <span
-                class="inline-block rounded-full w-4 h-4 mr-1"
-                :class="{'bg-success': field.value, 'bg-danger': !field.value}"
-            />
-            <span v-if="label != null">{{ label }}</span>
-        </p>
-    </panel-item>
+  <PanelItem :index="index" :field="field">
+    <template #value>
+      <Icon
+        viewBox="0 0 24 24"
+        width="24"
+        height="24"
+        :type="type"
+        :class="color"
+      />
+    </template>
+  </PanelItem>
 </template>
 
 <script>
 export default {
-    props: ['resource', 'resourceName', 'resourceId', 'field'],
+  props: ['index', 'resource', 'resourceName', 'resourceId', 'field'],
 
-    computed: {
-        trueLabel(){
-            return (this.field.true_label != undefined) ? this.field.true_label : null
-        },
+  computed: {
+    label() {
+      return this.field.value == true ? this.__('Yes') : this.__('No')
+    },
 
-        falseLabel(){
-            return (this.field.false_label != undefined) ? this.field.false_label : null
-        },
+    type() {
+      return this.field.value == true ? 'check-circle' : 'x-circle'
+    },
 
-        label() {
-            return this.field.value == true ? this.trueLabel : this.falseLabel
-        },
+    color() {
+      return this.field.value == true ? 'text-green-500' : 'text-red-500'
     },
+  },
 }
 </script>