Update devDependencies

.editorconfig

@@ -0,0 +1,17 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+indent_style = space
+indent_size = 4
+trim_trailing_whitespace = true
+
+[*.php]
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+indent_style = space
+indent_size = 4
+trim_trailing_whitespace = true

.prettierrc

@@ -0,0 +1,7 @@
+{
+    "printWidth": 120,
+    "singleQuote": true,
+    "trailingComma": "es5",
+    "arrowParens": "avoid",
+    "tabWidth": 4
+}

dist/js/tool.js.LICENSE.txt

@@ -0,0 +1,36 @@
+/*!
+  Copyright (c) 2018 Jed Watson.
+  Licensed under the MIT License (MIT), see
+  http://jedwatson.github.io/classnames
+*/
+
+/*!
+ * Cropper.js v1.5.7
+ * https://fengyuanchen.github.io/cropperjs
+ *
+ * Copyright 2015-present Chen Fengyuan
+ * Released under the MIT license
+ *
+ * Date: 2020-05-23T05:23:00.081Z
+ */
+
+/*!
+ * The buffer module from node.js, for the browser.
+ *
+ * @author   Feross Aboukhadijeh <http://feross.org>
+ * @license  MIT
+ */
+
+/*! ieee754. BSD-3-Clause License. Feross Aboukhadijeh <https://feross.org/opensource> */
+
+/**
+   * Takes a string with placeholder variables like `%{smart_count} file selected`
+   * and replaces it with values from options `{smart_count: 5}`
+   *
+   * @license https://github.com/airbnb/polyglot.js/blob/master/LICENSE
+   * taken from https://github.com/airbnb/polyglot.js/blob/master/lib/polyglot.js#L299
+   *
+   * @param {string} phrase that needs interpolation, with placeholders
+   * @param {object} options with values that will be used to replace placeholders
+   * @returns {any[]} interpolated
+   */

dist/mix-manifest.json

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

package.json

@@ -1,17 +1,27 @@
 {
     "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"
+        "dev": "mix",
+        "watch": "mix watch",
+        "hot": "mix watch --hot",
+        "prod": "mix --production",
+        "format": "prettier --write 'resources/**/*.{css,js,vue}'"
     },
     "devDependencies": {
-        "cross-env": "^5.0.0",
-        "laravel-mix": "^1.0"
+        "autoprefixer": "^10.4.0",
+        "cross-env": "^7.0.3",
+        "laravel-mix": "^6.0.39",
+        "postcss": "^8.4.5",
+        "postcss-dir-pseudo-class": "^6.0.1",
+        "postcss-import": "^14.0.1",
+        "postcss-logical": "^5.0.1",
+        "prettier": "^2.5.1",
+        "resolve-url-loader": "^4.0.0",
+        "sass": "^1.47.0",
+        "sass-loader": "^12.4.0",
+        "vue": "^2.6.14",
+        "vue-loader": "^15.9.8",
+        "vue-template-compiler": "^2.6.14"
     },
     "dependencies": {
         "@uppy/aws-s3-multipart": "^1.8.10",
@@ -20,7 +30,6 @@
         "@uppy/image-editor": "^0.1.8",
         "@uppy/screen-capture": "^1.0.11",
         "@uppy/webcam": "^1.8.2",
-        "vue": "^2.6.12",
-        "vue-template-compiler": "^2.6.12"
+        "laravel-nova": "^1.12.3"
     }
 }

resources/js/tool.js

@@ -1,3 +1,3 @@
 Nova.booting((Vue, router, store) => {
-    Vue.component('nova-s3-multipart-upload', require('./components/Tool'))
+    Vue.component('nova-s3-multipart-upload', require('./components/Tool').default)
 })

resources/sass/tool.scss

@@ -16,6 +16,7 @@ $green: #21b978;
 $darkgreen: #38a169;
 $blue: #4099de;
 $lightblue: #03a9f4;
+$beige: #fef3c7 !default;
 $gray-50: #f6fbff;
 $gray-100: #f4f7fa;
 $gray-100--highlighted: #f1f3f6;
@@ -28,8 +29,10 @@ $gray-600: #b3b9bf;
 $gray-700: #7c858e;
 $gray-800: #7c858e;
 $gray-900: #3c4b5f;
+$white-50: #fafafa !default;
 $highlight: #eef1f4;
 $highlight--dark: #03a9f4;
+$uppy-pink: #db2777;
 
 // Z-index
 $zIndex-negative: -10 !default;
@@ -50,8 +53,8 @@ $zIndex-5: 15 !default;
 // Override Uppy
 .uppy-panel .uppy-Dashboard-inner {
     width: 100%;
-    background-color: transparent;
     border: 0 none;
+    background-color: transparent;
 }
 
 .uppy-panel .uppy-size--md .uppy-Dashboard-AddFiles-title {

webpack.mix.js

@@ -1,7 +1,10 @@
-let mix = require('laravel-mix')
+let mix = require('laravel-mix');
 
 mix.setPublicPath('dist')
     .js('resources/js/tool.js', 'js')
-    .sass('resources/sass/tool.scss', 'css', {
-        includePaths: ["node_modules"]
-    })
+    .vue()
+    .sass('resources/sass/tool.scss', 'css', {}, [
+        require('autoprefixer'),
+        require('postcss-logical'),
+        require('postcss-dir-pseudo-class'),
+    ]);