bedita · didoda · Aug 24, 2023 · May 15, 2023 · May 16, 2023 · May 16, 2023
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -5,6 +5,10 @@ module.exports = {
         'es6': true,
         'browser': true,
     },
+    extends: [
+        'eslint:recommended',
+        'plugin:vue/recommended',
+    ],
     globals: {
         'BEDITA': true,
         'tinymce': true,
@@ -18,7 +22,66 @@ module.exports = {
         }],
         'no-extra-semi': 'off',
         'no-console': 'off',
-        'semi': '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"],
     },
     parserOptions: {
         ecmaVersion: 2021,
@@ -27,6 +90,5 @@ module.exports = {
     ignorePatterns: [
         'node_modules',
         'webroot/js/*'
-    ],
-    extends: ['eslint:recommended']
+    ]
 }
diff --git a/package.json b/package.json
@@ -57,6 +57,7 @@
         "browser-sync-webpack-plugin": "^2.3.0",
         "css-loader": "^6.4.0",
         "css-minimizer-webpack-plugin": "^3.1.1",
+        "eslint-plugin-vue": "^9.12.0",
         "gettext-parser": "^4.0.2",
         "json-loader": "^0.5.7",
         "mini-css-extract-plugin": "^2.4.2",

diff --git a/resources/js/app/app.js b/resources/js/app/app.js
@@ -25,7 +25,7 @@ import { buildSearchParams } from '../libs/urlUtils.js';
 
 import vTitle from 'vuejs-title';
 
-import { Icon } from '@iconify/vue2';
+import { Icon as AppIcon } from '@iconify/vue2';
 
 const _vueInstance = new Vue({
     el: 'main',
@@ -77,7 +77,17 @@ const _vueInstance = new Vue({
         ObjectsHistory:() => import(/* webpackChunkName: "objects-history" */'app/components/objects-history/objects-history'),
         SystemInfo:() => import(/* webpackChunkName: "system-info" */'app/components/system-info/system-info'),
         UserAccesses:() => import(/* webpackChunkName: "user-accesses" */'app/components/user-accesses/user-accesses'),
-        Icon,
+        AppIcon,
+    },
+
+    /**
+    * properties or methods available for injection into its descendants
+    * (inject: ['property'])
+    */
+    provide() {
+        return {
+            getCSFRToken: () => BEDITA.csrfToken,
+        };
     },
 
     data() {
@@ -103,13 +113,14 @@ const _vueInstance = new Vue({
         }
     },
 
-    /**
-    * properties or methods available for injection into its descendants
-    * (inject: ['property'])
-    */
-    provide() {
-        return {
-            getCSFRToken: () => BEDITA.csrfToken,
+    watch: {
+        /**
+         * watch pageSize variable and update pagination.page_size accordingly
+         *
+         * @param {Number} value page size number
+         */
+        pageSize(value) {
+            this.pagination.page_size = value;
         }
     },
 
@@ -163,17 +174,6 @@ const _vueInstance = new Vue({
         Vue.prototype.$eventBus = new Vue();
     },
 
-    watch: {
-        /**
-         * watch pageSize variable and update pagination.page_size accordingly
-         *
-         * @param {Number} value page size number
-         */
-        pageSize(value) {
-            this.pagination.page_size = value;
-        }
-    },
-
     mounted: function () {
         this.$nextTick(function () {
             this.alertBeforePageUnload(BEDITA.template);
@@ -580,4 +580,4 @@ const _vueInstance = new Vue({
 window._vueInstance = _vueInstance;
 
 // use component everywhere in Manager
-Vue.component('Icon', Icon);
+Vue.component('AppIcon', AppIcon);
diff --git a/resources/js/app/components/ajax-login/ajax-login.js b/resources/js/app/components/ajax-login/ajax-login.js
@@ -1,7 +1,6 @@
 import Vue from 'vue';
 
 export const AjaxLogin = Vue.extend({
-    name: 'AjaxLogin',
 
     template: `
         <div class="ajax-login-modal" role="dialog">
@@ -24,6 +23,7 @@ export const AjaxLogin = Vue.extend({
             </transition>
         </div>
     `,
+    name: 'AjaxLogin',
 
     props: {
         headerText: {

diff --git a/resources/js/app/components/autosize-textarea.js b/resources/js/app/components/autosize-textarea.js
@@ -1,9 +1,9 @@
-import autosize from "autosize";
+import autosize from 'autosize';
 
 export default {
-    props: ["value", "reset-value"],
+    props: ['value', 'reset-value'],
 
-    template: `<textarea @input="handleChange" :value="text"></textarea>`,
+    template: '<textarea @input="handleChange" :value="text"></textarea>',
 
     data() {
         return {

diff --git a/resources/js/app/components/category/category.js b/resources/js/app/components/category/category.js
@@ -6,12 +6,12 @@ export default {
         <form class="table-row">
             <div class="name-cell">
                 <input type="text" name="name" autocomplete="off" autocorrect="off" autocapitalize="off" size="50" maxlength="50" @change="onChangeName($event)" v-model="name" />
-                <span class="ml-05" v-title="this.$helpers.minLength(3)"><Icon icon="carbon:information"></Icon></span>
+                <span class="ml-05" v-title="this.$helpers.minLength(3)"><app-icon icon="carbon:information"></app-icon></span>
                 <div v-if="nameInUse()" v-text="errorAlreadyInUse"></div>
             </div>
             <div class="label-cell">
                 <input type="text" name="label" autocomplete="off" autocorrect="off" autocapitalize="off" v-model="label" />
-                <span class="ml-05" v-title="this.$helpers.minLength(3)"><Icon icon="carbon:information"></Icon></span>
+                <span class="ml-05" v-title="this.$helpers.minLength(3)"><app-icon icon="carbon:information"></app-icon></span>
             </div>
             <div class="parent_id-cell">
                 <select v-model="parent">
@@ -32,7 +32,7 @@ export default {
             </div>
             <div v-show="!id" class="buttons-cell narrow">
                 <button :disabled="name.length < 3 || label.length < 3 || nameInUse() || type === ''" class="button button-text-white is-width-auto" @click.stop.prevent="onCreate()">
-                    <Icon icon="carbon:save"></Icon>
+                    <app-icon icon="carbon:save"></app-icon>
                     <span class="ml-05">${t`Create`}</span>
                 </button>
             </div>
@@ -41,13 +41,13 @@ export default {
             </div>
             <div v-show="id" class="buttons-cell narrow">
                 <button :disabled="name.length < 3 || label.length < 3 || unchanged() || nameInUse()" class="button button-text-white is-width-auto" @click.stop.prevent="onModify()">
-                    <Icon icon="carbon:save"></Icon>
+                    <app-icon icon="carbon:save"></app-icon>
                     <span class="ml-05">${t`Modify`}</span>
                 </button>
             </div>
             <div v-show="id" class="buttons-cell narrow">
                 <button class="button button-text-white is-width-auto" @click.stop.prevent="onDelete()">
-                    <Icon icon="carbon:trash-can"></Icon>
+                    <app-icon icon="carbon:trash-can"></app-icon>
                     <span class="ml-05">${t`Delete`}</span>
                 </button>
             </div>

diff --git a/resources/js/app/components/dialog/dialog.js b/resources/js/app/components/dialog/dialog.js
@@ -14,13 +14,13 @@ export const Dialog = Vue.extend({
                 <header class="is-flex space-between align-center is-expanded">
                     <div class="is-flex align-center">
                         <span class="is-capitalized mr-05" v-if="headerText"><: t(headerText) :></span>
-                        <Icon icon="carbon:checkmark" color="green" v-if="dialogType === 'success'"></Icon>
-                        <Icon icon="carbon:information" color="blue" v-if="dialogType === 'info'"></Icon>
-                        <Icon icon="carbon:warning" color="orange" v-if="dialogType === 'warning'"></Icon>
-                        <Icon icon="carbon:misuse" color="red" v-if="dialogType === 'error'"></Icon>
+                        <app-icon icon="carbon:checkmark" color="green" v-if="dialogType === 'success'"></app-icon>
+                        <app-icon icon="carbon:information" color="blue" v-if="dialogType === 'info'"></app-icon>
+                        <app-icon icon="carbon:warning" color="orange" v-if="dialogType === 'warning'"></app-icon>
+                        <app-icon icon="carbon:misuse" color="red" v-if="dialogType === 'error'"></app-icon>
                     </div>
                     <i @click="hide()">
-                        <Icon icon="carbon:close"></Icon>
+                        <app-icon icon="carbon:close"></app-icon>
                     </i>
                 </header>
                 <div class="message mt-1 has-text-size-larger" v-if="message"><: message :></div>

diff --git a/resources/js/app/components/drop-upload.js b/resources/js/app/components/drop-upload.js
@@ -32,12 +32,12 @@ export default {
                         <span class="name" :class="info.cancelled? 'has-text-gray-500' : ''"><: info.file.name :></span>
 
                         <button v-show="!info.error && !info.cancelled && !info.done && !info.pending" class="button-outlined" @click.stop.prevent="abortUpload(info.file)">
-                            <Icon icon="carbon:stop"></Icon>
+                            <app-icon icon="carbon:stop"></app-icon>
                             <span class="ml-05">${t`stop`}</span>
                         </button>
 
                         <button v-show="(info.error || info.cancelled) && !info.done" class="button-outlined" @click.stop.prevent="removeProgressItem(info.file)">
-                            <Icon icon="carbon:trash-can"></Icon>
+                            <app-icon icon="carbon:trash-can"></app-icon>
                             <span class="ml-05">${t`remove`}</span>
                         </button>
 

diff --git a/resources/js/app/components/filter-box.js b/resources/js/app/components/filter-box.js
@@ -33,7 +33,7 @@ export default {
     props: {
         configPaginateSizes: {
             type: String,
-            default: "[10]"
+            default: '[10]'
         },
         filterActive: Boolean,
         filterList: {
@@ -227,7 +227,7 @@ export default {
          * @returns {void}
          */
         pageSize() {
-            this.$emit("filter-update-page-size", this.pageSize);
+            this.$emit('filter-update-page-size', this.pageSize);
         },
 
         /**
@@ -351,7 +351,7 @@ export default {
             }
 
             const filter = this.prepareFilters();
-            this.$emit("filter-objects", { ...this.queryFilter, filter });
+            this.$emit('filter-objects', { ...this.queryFilter, filter });
         },
 
         /**
@@ -363,7 +363,7 @@ export default {
             this.selectedStatuses = [];
             this.selectedType = '';
             this.queryFilter = this.getCleanQuery();
-            this.$emit("filter-reset");
+            this.$emit('filter-reset');
         },
 
         /**
@@ -374,7 +374,7 @@ export default {
          * @emits Event#filter-update-current-page
          */
         onChangePage(index) {
-            this.$emit("filter-update-current-page", index);
+            this.$emit('filter-update-current-page', index);
         },
         onChangePageNumber(e) {
             let val = e.target.value;

diff --git a/resources/js/app/components/flash-message.vue b/resources/js/app/components/flash-message.vue
@@ -6,10 +6,10 @@
         <div :class="['message', level, (params?.class || '').trim()]">
             <h2>
                 <i v-if="viewName.toLowerCase() !== 'login'">
-                    <Icon icon="carbon:checkmark" color="green" v-if="level === 'success'"></Icon>
-                    <Icon icon="carbon:information" color="blue" v-if="level === 'info'"></Icon>
-                    <Icon icon="carbon:warning" color="orange" v-if="level === 'warning'"></Icon>
-                    <Icon icon="carbon:misuse" color="red" v-if="level === 'error'"></Icon>
+                    <app-icon icon="carbon:checkmark" color="green" v-if="level === 'success'"></app-icon>
+                    <app-icon icon="carbon:information" color="blue" v-if="level === 'info'"></app-icon>
+                    <app-icon icon="carbon:warning" color="orange" v-if="level === 'warning'"></app-icon>
+                    <app-icon icon="carbon:misuse" color="red" v-if="level === 'error'"></app-icon>
                 </i>
                 {{ message }}
             </h2>
@@ -22,7 +22,7 @@
             <p v-if="shouldShowDump && !isAdmin">{{ dumpLabel }}</p>
 
             <label v-if="viewName.toLowerCase() !== 'login'" @click="hide">
-                <Icon icon="carbon:close-outline"></Icon>
+                <app-icon icon="carbon:close-outline"></app-icon>
                 {{ t('Close') }}
             </label>
         </div>

diff --git a/resources/js/app/components/index-cell/index-cell.js b/resources/js/app/components/index-cell/index-cell.js
@@ -6,7 +6,7 @@ export default {
     template: `
     <div :class="className()" untitled-label="${t`Untitled`}" @mouseover="onMouseover()" @mouseleave="onMouseleave()">
         <: !msg ? truncated : '' :>
-        <Icon icon="carbon:copy" v-if="showCopyIcon()" @click.stop.prevent="copy()"></Icon>
+        <app-icon icon="carbon:copy" v-if="showCopyIcon()" @click.stop.prevent="copy()"></app-icon>
         <div v-if="msg" v-text="msg" style="color: gray"></div>
     </div>
     `,

diff --git a/resources/js/app/components/json-fields/string-list.vue b/resources/js/app/components/json-fields/string-list.vue
@@ -8,14 +8,14 @@
                 </div>
                 <div v-if="!readonly">
                     <button @click.prevent="remove(index)" class="button button-primary" style="min-width: 32px; border-top-left-radius: 0; border-bottom-left-radius: 0;">
-                        <Icon icon="carbon:trash-can"></Icon>
+                        <app-icon icon="carbon:trash-can"></app-icon>
                         <span class="ml-05">{{ t('Remove') }}</span>
                     </button>
                 </div>
             </div>
         </div>
         <button @click.prevent="add" v-if="!readonly">
-            <Icon icon="carbon:add"></Icon>
+            <app-icon icon="carbon:add"></app-icon>
             <span class="ml-05">{{ t('Add') }}</span>
         </button>
 

diff --git a/resources/js/app/components/locations-view/location-view.vue b/resources/js/app/components/locations-view/location-view.vue
@@ -53,7 +53,7 @@
                         <div class="is-flex">
                             <input class="coordinates" type="text" v-model="coordinates" @change="onChange" :disabled="!!id" />
                             <button class="get-coordinates" @click.prevent="geocode" :disabled="!apiKey || !address">
-                                <Icon icon="carbon:wikis"></Icon>
+                                <app-icon icon="carbon:wikis"></app-icon>
                                 <span class="ml-05">{{ msgGet }}</span>
                             </button>
                         </div>
@@ -80,11 +80,11 @@
             </div>
             <div class="location-buttons">
                 <a v-if="id" class="button button-text-white" :href="$helpers.buildViewUrl(id)" target="_blank">
-                    <Icon icon="carbon:launch"></Icon>
+                    <app-icon icon="carbon:launch"></app-icon>
                     <span class="ml-05">{{ msgEdit }}</span>
                 </a>
                 <button @click.prevent="onRemove" class="button button-text-white remove">
-                <Icon icon="carbon:unlink"></Icon>
+                    <app-icon icon="carbon:unlink"></app-icon>
                     <span class="ml-05">{{ msgRemove }}</span>
                 </button>
             </div>