Clean up code formatting

.eslintrc.js

@@ -1,15 +1,32 @@
 module.exports = {
-  extends: [
+  extends: ['eslint:recommended', 'plugin:vue/recommended'],
-    'eslint:recommended',
+  parserOptions: {
-    'plugin:vue/recommended',
+    ecmaVersion: 2020,
-  ],
+    sourceType: 'module',
+  },
+  env: {
+    amd: true,
+    browser: true,
+    es6: true,
+  },
   rules: {
-    "indent": ['error', 2],
+    indent: ['error', 2],
-    'quotes': ['warn', 'single'],
+    quotes: ['warn', 'single'],
-    'semi': ['warn', 'never'],
+    semi: ['warn', 'never'],
+    'no-unused-vars': ['error', { vars: 'all', args: 'after-used', ignoreRestSiblings: true }],
     'comma-dangle': ['warn', 'always-multiline'],
-    'vue/max-attributes-per-line': false,
+    'vue/max-attributes-per-line': 'off',
-    'vue/require-default-prop': false,
+    'vue/require-default-prop': 'off',
-    'vue/singleline-html-element-content-newline': false,
+    'vue/singleline-html-element-content-newline': 'off',
-  }
+    'vue/html-self-closing': [
+      'warn',
+      {
+        html: {
+          void: 'always',
+          normal: 'always',
+          component: 'always',
+        },
+      },
+    ],
+  },
 }

.prettierrc

@@ -0,0 +1,8 @@
+{
+  "printWidth": 10000,
+  "semi": false,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "all",
+  "htmlWhitespaceSensitivity": "css"
+}

package.json

@@ -15,16 +15,16 @@
         "@inertiajs/inertia-vue": "^0.5.5",
         "@inertiajs/progress": "^0.2.4",
         "cross-env": "^5.2.1",
-        "eslint": "^5.16.0",
+        "eslint": "^6.8.0",
-        "eslint-plugin-vue": "^5.2.3",
+        "eslint-plugin-vue": "^7.5.0",
-        "laravel-mix": "^5.0.1",
+        "laravel-mix": "^5.0.9",
         "lodash": "^4.17.21",
         "popper.js": "^1.16.0",
         "portal-vue": "^1.5.1",
         "postcss-import": "^12.0.1",
         "postcss-nesting": "^7.0.1",
         "resolve-url-loader": "^2.3.2",
-        "tailwindcss": "^1.2.0-canary.5",
+        "tailwindcss": "^1.9.6",
         "vue": "^2.6.11",
         "vue-meta": "^2.3.1",
         "vue-template-compiler": "^2.6.11"

resources/js/Pages/Auth/Login.vue

@@ -9,7 +9,7 @@
           <text-input v-model="form.email" :error="form.errors.email" class="mt-10" label="Email" type="email" autofocus autocapitalize="off" />
           <text-input v-model="form.password" :error="form.errors.password" class="mt-6" label="Password" type="password" />
           <label class="mt-6 select-none flex items-center" for="remember">
-            <input id="remember" v-model="form.remember" class="mr-1" type="checkbox">
+            <input id="remember" v-model="form.remember" class="mr-1" type="checkbox" />
             <span class="text-sm">Remember Me</span>
           </label>
         </div>
@@ -23,9 +23,9 @@
 </template>
 
 <script>
-import LoadingButton from '@/Shared/LoadingButton'
 import Logo from '@/Shared/Logo'
 import TextInput from '@/Shared/TextInput'
+import LoadingButton from '@/Shared/LoadingButton'
 
 export default {
   metaInfo: { title: 'Login' },

resources/js/Pages/Contacts/Create.vue

@@ -35,18 +35,18 @@
 
 <script>
 import Layout from '@/Shared/Layout'
-import LoadingButton from '@/Shared/LoadingButton'
-import SelectInput from '@/Shared/SelectInput'
 import TextInput from '@/Shared/TextInput'
+import SelectInput from '@/Shared/SelectInput'
+import LoadingButton from '@/Shared/LoadingButton'
 
 export default {
   metaInfo: { title: 'Create Contact' },
-  layout: Layout,
   components: {
     LoadingButton,
     SelectInput,
     TextInput,
   },
+  layout: Layout,
   props: {
     organizations: Array,
   },

resources/js/Pages/Contacts/Edit.vue

@@ -40,9 +40,9 @@
 
 <script>
 import Layout from '@/Shared/Layout'
-import LoadingButton from '@/Shared/LoadingButton'
-import SelectInput from '@/Shared/SelectInput'
 import TextInput from '@/Shared/TextInput'
+import SelectInput from '@/Shared/SelectInput'
+import LoadingButton from '@/Shared/LoadingButton'
 import TrashedMessage from '@/Shared/TrashedMessage'
 
 export default {
@@ -51,13 +51,13 @@ export default {
       title: `${this.form.first_name} ${this.form.last_name}`,
     }
   },
-  layout: Layout,
   components: {
     LoadingButton,
     SelectInput,
     TextInput,
     TrashedMessage,
   },
+  layout: Layout,
   props: {
     errors: Object,
     contact: Object,

resources/js/Pages/Contacts/Index.vue

@@ -64,21 +64,21 @@
 
 <script>
 import Icon from '@/Shared/Icon'
+import pickBy from 'lodash/pickBy'
 import Layout from '@/Shared/Layout'
+import throttle from 'lodash/throttle'
 import mapValues from 'lodash/mapValues'
 import Pagination from '@/Shared/Pagination'
-import pickBy from 'lodash/pickBy'
 import SearchFilter from '@/Shared/SearchFilter'
-import throttle from 'lodash/throttle'
 
 export default {
   metaInfo: { title: 'Contacts' },
-  layout: Layout,
   components: {
     Icon,
     Pagination,
     SearchFilter,
   },
+  layout: Layout,
   props: {
     contacts: Object,
     filters: Object,

resources/js/Pages/Organizations/Create.vue

@@ -30,18 +30,18 @@
 
 <script>
 import Layout from '@/Shared/Layout'
-import LoadingButton from '@/Shared/LoadingButton'
-import SelectInput from '@/Shared/SelectInput'
 import TextInput from '@/Shared/TextInput'
+import SelectInput from '@/Shared/SelectInput'
+import LoadingButton from '@/Shared/LoadingButton'
 
 export default {
   metaInfo: { title: 'Create Organization' },
-  layout: Layout,
   components: {
     LoadingButton,
     SelectInput,
     TextInput,
   },
+  layout: Layout,
   remember: 'form',
   data() {
     return {

resources/js/Pages/Organizations/Edit.vue

@@ -72,16 +72,15 @@
 <script>
 import Icon from '@/Shared/Icon'
 import Layout from '@/Shared/Layout'
-import LoadingButton from '@/Shared/LoadingButton'
-import SelectInput from '@/Shared/SelectInput'
 import TextInput from '@/Shared/TextInput'
+import SelectInput from '@/Shared/SelectInput'
+import LoadingButton from '@/Shared/LoadingButton'
 import TrashedMessage from '@/Shared/TrashedMessage'
 
 export default {
   metaInfo() {
     return { title: this.form.name }
   },
-  layout: Layout,
   components: {
     Icon,
     LoadingButton,
@@ -89,6 +88,7 @@ export default {
     TextInput,
     TrashedMessage,
   },
+  layout: Layout,
   props: {
     organization: Object,
   },

resources/js/Pages/Organizations/Index.vue

@@ -56,21 +56,21 @@
 
 <script>
 import Icon from '@/Shared/Icon'
+import pickBy from 'lodash/pickBy'
 import Layout from '@/Shared/Layout'
+import throttle from 'lodash/throttle'
 import mapValues from 'lodash/mapValues'
 import Pagination from '@/Shared/Pagination'
-import pickBy from 'lodash/pickBy'
 import SearchFilter from '@/Shared/SearchFilter'
-import throttle from 'lodash/throttle'
 
 export default {
   metaInfo: { title: 'Organizations' },
-  layout: Layout,
   components: {
     Icon,
     Pagination,
     SearchFilter,
   },
+  layout: Layout,
   props: {
     organizations: Object,
     filters: Object,

resources/js/Pages/Users/Create.vue

@@ -27,20 +27,20 @@
 
 <script>
 import Layout from '@/Shared/Layout'
-import LoadingButton from '@/Shared/LoadingButton'
-import SelectInput from '@/Shared/SelectInput'
-import TextInput from '@/Shared/TextInput'
 import FileInput from '@/Shared/FileInput'
+import TextInput from '@/Shared/TextInput'
+import SelectInput from '@/Shared/SelectInput'
+import LoadingButton from '@/Shared/LoadingButton'
 
 export default {
   metaInfo: { title: 'Create User' },
-  layout: Layout,
   components: {
+    FileInput,
     LoadingButton,
     SelectInput,
     TextInput,
-    FileInput,
   },
+  layout: Layout,
   remember: 'form',
   data() {
     return {

resources/js/Pages/Users/Edit.vue

@@ -6,7 +6,7 @@
         <span class="text-indigo-400 font-medium">/</span>
         {{ form.first_name }} {{ form.last_name }}
       </h1>
-      <img v-if="user.photo" class="block w-8 h-8 rounded-full ml-4" :src="user.photo">
+      <img v-if="user.photo" class="block w-8 h-8 rounded-full ml-4" :src="user.photo" />
     </div>
     <trashed-message v-if="user.deleted_at" class="mb-6" @restore="restore">
       This user has been deleted.
@@ -35,10 +35,10 @@
 
 <script>
 import Layout from '@/Shared/Layout'
-import LoadingButton from '@/Shared/LoadingButton'
-import SelectInput from '@/Shared/SelectInput'
 import TextInput from '@/Shared/TextInput'
 import FileInput from '@/Shared/FileInput'
+import SelectInput from '@/Shared/SelectInput'
+import LoadingButton from '@/Shared/LoadingButton'
 import TrashedMessage from '@/Shared/TrashedMessage'
 
 export default {
@@ -47,14 +47,14 @@ export default {
       title: `${this.form.first_name} ${this.form.last_name}`,
     }
   },
-  layout: Layout,
   components: {
+    FileInput,
     LoadingButton,
     SelectInput,
     TextInput,
-    FileInput,
     TrashedMessage,
   },
+  layout: Layout,
   props: {
     user: Object,
   },

resources/js/Pages/Users/Index.vue

@@ -31,7 +31,7 @@
         <tr v-for="user in users" :key="user.id" class="hover:bg-gray-100 focus-within:bg-gray-100">
           <td class="border-t">
             <inertia-link class="px-6 py-4 flex items-center focus:text-indigo-500" :href="route('users.edit', user.id)">
-              <img v-if="user.photo" class="block w-5 h-5 rounded-full mr-2 -my-2" :src="user.photo">
+              <img v-if="user.photo" class="block w-5 h-5 rounded-full mr-2 -my-2" :src="user.photo" />
               {{ user.name }}
               <icon v-if="user.deleted_at" name="trash" class="flex-shrink-0 w-3 h-3 fill-gray-400 ml-2" />
             </inertia-link>
@@ -62,19 +62,19 @@
 
 <script>
 import Icon from '@/Shared/Icon'
-import Layout from '@/Shared/Layout'
-import mapValues from 'lodash/mapValues'
 import pickBy from 'lodash/pickBy'
-import SearchFilter from '@/Shared/SearchFilter'
+import Layout from '@/Shared/Layout'
 import throttle from 'lodash/throttle'
+import mapValues from 'lodash/mapValues'
+import SearchFilter from '@/Shared/SearchFilter'
 
 export default {
   metaInfo: { title: 'Users' },
-  layout: Layout,
   components: {
     Icon,
     SearchFilter,
   },
+  layout: Layout,
   props: {
     users: Array,
     filters: Object,

resources/js/Shared/Dropdown.vue

@@ -52,7 +52,7 @@ export default {
     },
   },
   mounted() {
-    document.addEventListener('keydown', (e) => {
+    document.addEventListener('keydown', e => {
       if (e.keyCode === 27) {
         this.show = false
       }

resources/js/Shared/FileInput.vue

@@ -2,14 +2,16 @@
   <div>
     <label v-if="label" class="form-label">{{ label }}:</label>
     <div class="form-input p-0" :class="{ error: errors.length }">
-      <input ref="file" type="file" :accept="accept" class="hidden" @change="change">
+      <input ref="file" type="file" :accept="accept" class="hidden" @change="change" />
       <div v-if="!value" class="p-2">
         <button type="button" class="px-4 py-1 bg-gray-500 hover:bg-gray-700 rounded-sm text-xs font-medium text-white" @click="browse">
           Browse
         </button>
       </div>
       <div v-else class="flex items-center justify-between p-2">
-        <div class="flex-1 pr-1">{{ value.name }} <span class="text-gray-500 text-xs">({{ filesize(value.size) }})</span></div>
+        <div class="flex-1 pr-1">
+          {{ value.name }} <span class="text-gray-500 text-xs">({{ filesize(value.size) }})</span>
+        </div>
         <button type="button" class="px-4 py-1 bg-gray-500 hover:bg-gray-700 rounded-sm text-xs font-medium text-white" @click="remove">
           Remove
         </button>

resources/js/Shared/Layout.vue

@@ -46,11 +46,11 @@
 </template>
 
 <script>
-import Dropdown from '@/Shared/Dropdown'
-import FlashMessages from '@/Shared/FlashMessages'
 import Icon from '@/Shared/Icon'
 import Logo from '@/Shared/Logo'
+import Dropdown from '@/Shared/Dropdown'
 import MainMenu from '@/Shared/MainMenu'
+import FlashMessages from '@/Shared/FlashMessages'
 
 export default {
   components: {

resources/js/Shared/MainMenu.vue

@@ -37,11 +37,9 @@ export default {
   methods: {
     isUrl(...urls) {
       let currentUrl = this.$page.url.substr(1)
-
       if (urls[0] === '') {
         return currentUrl === ''
       }
-
       return urls.filter(url => currentUrl.startsWith(url)).length
     },
   },

resources/js/Shared/SearchFilter.vue

@@ -12,7 +12,7 @@
           <slot />
         </div>
       </dropdown>
-      <input class="relative w-full px-6 py-3 rounded-r focus:shadow-outline" autocomplete="off" type="text" name="search" placeholder="Search…" :value="value" @input="$emit('input', $event.target.value)">
+      <input class="relative w-full px-6 py-3 rounded-r focus:shadow-outline" autocomplete="off" type="text" name="search" placeholder="Search…" :value="value" @input="$emit('input', $event.target.value)" />
     </div>
     <button class="ml-3 text-sm text-gray-500 hover:text-gray-700 focus:text-indigo-500" type="button" @click="$emit('reset')">Reset</button>
   </div>

resources/js/Shared/TextInput.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <label v-if="label" class="form-label" :for="id">{{ label }}:</label>
-    <input :id="id" ref="input" v-bind="$attrs" class="form-input" :class="{ error: error }" :type="type" :value="value" @input="$emit('input', $event.target.value)">
+    <input :id="id" ref="input" v-bind="$attrs" class="form-input" :class="{ error: error }" :type="type" :value="value" @input="$emit('input', $event.target.value)" />
     <div v-if="error" class="form-error">{{ error }}</div>
   </div>
 </template>

resources/js/app.js

@@ -16,9 +16,10 @@ const el = document.getElementById('app')
 
 new Vue({
   metaInfo: {
-    titleTemplate: (title) => title ? `${title} - Ping CRM` : 'Ping CRM'
+    titleTemplate: title => (title ? `${title} - Ping CRM` : 'Ping CRM'),
   },
-  render: h => h(App, {
+  render: h =>
+    h(App, {
       props: {
         initialPage: JSON.parse(el.dataset.page),
         resolveComponent: name => import(`@/Pages/${name}`).then(module => module.default),