Fix eslintrc rules

.eslintrc.js

@@ -24,64 +24,69 @@ module.exports = {
         'no-console': 'off',
         'semi': 'off',
 
-    // override/add rules settings here
-    "vue/attributes-order": ["warn", {
-        "order": [
-          "GLOBAL",
-          "OTHER_ATTR",
-          "DEFINITION",
-          "TWO_WAY_BINDING",
-          "OTHER_DIRECTIVES",
-          "EVENTS",
-          "RENDER_MODIFIERS",
-          "CONTENT",
-          "CONDITIONALS",
-        ],
-        "alphabetical": false
-      }],
-      "vue/order-in-components": ["warn", {
-        "order": [
-          ["template", "render"],
-          "extends",
-          "el",
-          "name",
-          "key",
-          "parent",
-          "functional",
-          ["delimiters", "comments"],
-          ["components", "directives", "filters"],
-          "mixins",
-          ["provide", "inject"],
-          "ROUTER_GUARDS",
-          "layout",
-          "middleware",
-          "validate",
-          "scrollToTop",
-          "transition",
-          "loading",
-          "inheritAttrs",
-          "model",
-          ["props", "propsData"],
-          "emits",
-          "setup",
-          "asyncData",
-          "data",
-          "fetch",
-          "head",
-          "computed",
-          "watch",
-          "watchQuery",
-          "LIFECYCLE_HOOKS",
-          "methods",
-          "renderError"
-        ]
-      }],
-      "vue/first-attribute-linebreak": ["warn", {
-        "singleline": "beside",
-        "multiline": "ignore"
-      }],
-      "vue/multi-word-component-names": ["warn"],
-      "vue/no-v-html": ["off"],
+        // override/add rules settings here
+        'vue/attributes-order': ['warn', {
+            'order': [
+                'GLOBAL',
+                'OTHER_ATTR',
+                'DEFINITION',
+                'TWO_WAY_BINDING',
+                'OTHER_DIRECTIVES',
+                'EVENTS',
+                'RENDER_MODIFIERS',
+                'CONTENT',
+                'CONDITIONALS',
+            ],
+            'alphabetical': false
+        }],
+        'vue/first-attribute-linebreak': ['warn', {
+            'singleline': 'beside',
+            'multiline': 'ignore'
+        }],
+        'vue/html-indent': ['warn', 4],
+        'vue/multi-word-component-names': ['warn'],
+        'vue/no-mutating-props': ['warn'],
+        'vue/no-unused-components': ['warn'],
+        'vue/no-use-v-if-with-v-for': ['warn'],
+        'vue/no-v-html': ['off'],
+        'vue/order-in-components': ['warn', {
+            'order': [
+                ['template', 'render'],
+                'extends',
+                'el',
+                'name',
+                'key',
+                'parent',
+                'functional',
+                ['delimiters', 'comments'],
+                ['components', 'directives', 'filters'],
+                'mixins',
+                ['provide', 'inject'],
+                'ROUTER_GUARDS',
+                'layout',
+                'middleware',
+                'validate',
+                'scrollToTop',
+                'transition',
+                'loading',
+                'inheritAttrs',
+                'model',
+                ['props', 'propsData'],
+                'emits',
+                'setup',
+                'asyncData',
+                'data',
+                'fetch',
+                'head',
+                'computed',
+                'watch',
+                'watchQuery',
+                'LIFECYCLE_HOOKS',
+                'methods',
+                'renderError'
+            ]
+        }],
+        'vue/require-v-for-key': ['warn'],
     },
     parserOptions: {
         ecmaVersion: 2021,

.github/workflows/javascript.yml

@@ -44,4 +44,4 @@ jobs:
         run: yarn build
 
       - name: Run ESLint
-        run: yarn eslint resources/js/**/*.js
+        run: yarn eslint resources/js/**/*.js resources/js/**/*.vue

resources/js/app/components/json-editor/json-editor.vue

@@ -1,14 +1,11 @@
 <template>
+    <div class="json-editor" />
 </template>
 <script>
 import { JSONEditor } from 'vanilla-jsoneditor';
 
 export default {
-    name: 'json-editor',
-
-    components: {
-        JSONEditor,
-    },
+    name: 'JsonEditor',
 
     props: {
         target: {
@@ -33,10 +30,7 @@ export default {
 
     mounted() {
         const element = document.getElementById(this.target);
-        const options = Object.assign({
-            content: { text: this.text },
-            readOnly: true
-        }, this.options);
+        const options = {content: { text: this.text }, readOnly: true, ...this.options};
         this.editor = new JSONEditor({
             target: element,
             props: options

resources/js/app/components/object-property/object-properties.vue

@@ -1,8 +1,6 @@
 <template>
-
     <div class="properties-container">
-
-        <object-property v-for="(prop, index) in properties"
+        <object-property v-for="prop in properties"
             :key="prop.id"
             :prop="prop"
             :type="type"
@@ -15,19 +13,32 @@
         <p v-if="properties.length == 0">
             {{ t('No properties') }}
         </p>
-
     </div>
-
 </template>
 <script>
 
 export default {
     props: {
-        initProperties: [],
-        type: '',
-        hidden: [],
-        translatable: [],
-        translationRules: [],
+        initProperties: {
+            type: Array,
+            default: () => ([]),
+        },
+        type: {
+            type: String,
+            default: '',
+        },
+        hidden: {
+            type: Array,
+            default: () => ([]),
+        },
+        translatable: {
+            type: Array,
+            default: () => ([]),
+        },
+        translationRules: {
+            type: Array,
+            default: () => ([]),
+        },
     },
 
     components: {

resources/js/app/components/object-property/object-property.vue

@@ -59,12 +59,30 @@ import { t } from 'ttag';
 
 export default {
     props: {
-        prop: [],
-        nobuttonsfor: [],
-        type: '',
-        isHidden: false,
-        isNew: false,
-        isTranslatable: false,
+        prop: {
+            type: Object,
+            default: () => ({}),
+        },
+        nobuttonsfor: {
+            type: Array,
+            default: () => ([]),
+        },
+        type: {
+            type: String,
+            default: '',
+        },
+        isHidden: {
+            type: Boolean,
+            default: false,
+        },
+        isNew: {
+            type: Boolean,
+            default: false,
+        },
+        isTranslatable: {
+            type: Boolean,
+            default: false,
+        },
     },
 
     data() {

resources/js/app/components/objects-history/objects-history.vue

@@ -30,7 +30,7 @@
                 <app-icon icon="carbon:content-view"></app-icon>
                 <i class="ml-05">{{ msgChange }}</i>
             </span>
-            <template v-for="item,key in items">
+            <template v-for="item in items">
                 <span>{{ formatDate(item?.meta?.created) }}</span>
                 <span>
                     {{ msgAction }}
@@ -129,7 +129,7 @@ export default {
         loadHistory(pageSize = 20, page = 1) {
             this.loading = true;
             this.getHistory(pageSize, page)
-                .catch(_error => { this.loading = false; return false;})
+                .catch(_error => { console.error(_error); this.loading = false; return false; })
                 .then(response => {
                     this.loading = false;
                     this.items = response.data || [];
@@ -138,7 +138,7 @@ export default {
                     const objectIds = this.items.map(item => item.meta.resource_id).filter((v, i, a) => a.indexOf(v) === i).map(i=>Number(i));
                     const ids = [...userIds, ...objectIds];
                     this.getObjects(ids)
-                        .catch(_error => { return false;})
+                        .catch(_error => { console.error(_error); return false; })
                         .then(response => {
                             const items = response.data || [];
                             const resourcesMap = items.reduce((map, obj) => {

resources/js/app/components/relation-view/roles-list-view.vue

@@ -27,7 +27,7 @@ export default {
     props: {
         groups: {
             type: Object,
-            default: {},
+            default: () => {},
         },
         relatedObjects: {
             type: Array,

resources/js/app/components/tag-picker/tag-picker.vue

@@ -46,12 +46,27 @@ export default {
     },
 
     props: {
-        id: String,
+        id: {
+            type: String,
+            default: '',
+        },
         disabled: Boolean,
-        label: String,
-        form: String,
-        initialTags: Array,
-        searchonly: false,
+        label: {
+            type: String,
+            default: '',
+        },
+        form: {
+            type: String,
+            default: '',
+        },
+        initialTags: {
+            type: Array,
+            default: () => ([]),
+        },
+        searchonly: {
+            type: Boolean,
+            default: false,
+        },
     },
 
     data() {

resources/js/app/components/thumbnail/thumbnail.vue

@@ -13,7 +13,7 @@ export default {
     props: {
         related: {
             type: Object,
-            default: {}
+            default: () => {},
         },
     },
 

resources/js/app/components/user-accesses/user-accesses.vue

@@ -26,7 +26,7 @@
                 <app-icon icon="carbon:user"></app-icon>
                 <i class="ml-05">{{ msgUser }}</i>
             </span>
-            <template v-for="user,key in accesses">
+            <template v-for="user in accesses">
                 <span>{{ formatDate(user?.meta?.last_login) }}</span>
                 <span>
                     <a class="tag has-background-module-users" :href="`/users/view/${user.id}`" target="_new">
@@ -84,7 +84,7 @@ export default {
         loadAccesses(pageSize = 20, page = 1) {
             this.loading = true;
             this.getAccesses(pageSize, page)
-                .catch(_error => { this.loading = false; return false;})
+                .catch(_error => { console.error(_error); this.loading = false; return false; })
                 .then(response => {
                     this.loading = false;
                     this.accesses = response.data || [];