Lint refactoring

.eslintrc.json

@@ -2,24 +2,16 @@
 	"root": true,
 	"parser": "@typescript-eslint/parser",
 	"parserOptions": {
-		"ecmaFeatures": {
-			"jsx": true
-		},
 		"ecmaVersion": 12,
 		"sourceType": "module"
 	},
 	"plugins": [
-		"vue",
-		"react",
 		"@typescript-eslint",
 		"surveyjs"
 	],
 	"extends": [
 		"eslint:recommended",
-		"plugin:@typescript-eslint/eslint-recommended",
-		"plugin:@typescript-eslint/recommended",
-		"plugin:react/recommended",
-		"plugin:vue/essential"
+		"plugin:@typescript-eslint/recommended"
 	],
 	"rules": {
 		"surveyjs/no-test-only": 2,
@@ -156,5 +148,83 @@
 			"off",
 			"windows"
 		]
-	}
+	},
+	"overrides": [
+		{
+			"files": [
+				"src/*.ts"
+			],
+			"rules": {
+				"no-restricted-properties": [
+					"error",
+					{
+						"object": "window",
+						"property": "document"
+					}
+				],
+				"no-restricted-globals": [
+					"error",
+					{
+						"name": "document",
+						"message": "Do not use document into survey-core. Use methods from DomDocumentHelper"
+					},
+					{
+						"name": "window",
+						"message": "Do not use window into survey-core. Use method from DomWindowHelper"
+					}
+				]
+			}
+		},
+		{
+			"files": [
+				"*.jsx"
+			],
+			"parserOptions": {
+				"ecmaFeatures": {
+					"jsx": true
+				}
+			},
+			"plugins": [
+				"@typescript-eslint",
+				"react"
+			],
+			"extends": [
+				"eslint:recommended",
+				"plugin:@typescript-eslint/recommended",
+				"plugin:react/recommended"
+			]
+		},
+		{
+			"files": [
+				"*.vue"
+			],
+			"parserOptions": {
+				"ecmaFeatures": {
+					"jsx": false
+				}
+			},
+			"plugins": [
+				"@typescript-eslint",
+				"vue"
+			],
+			"extends": [
+				"plugin:vue/essential",
+				"eslint:recommended",
+				"@vue/eslint-config-typescript"
+			],
+			"rules": {
+				"no-extra-boolean-cast": "off",
+				"vue/no-use-v-if-with-v-for": "off",
+				"vue/multi-word-component-names": "off"
+			}
+		},
+		{
+			"files": [
+				"*.js"
+			],
+			"rules": {
+				"no-undef": "off"
+			}
+		}
+	]
 }

package.json

@@ -115,6 +115,7 @@
     "@types/signature_pad": "^2.3.0",
     "@typescript-eslint/eslint-plugin": "^4.29.0",
     "@typescript-eslint/parser": "^4.29.0",
+    "@vue/eslint-config-typescript": "^11.0.0",
     "ace-builds": "1.2.2",
     "ajv": "6.12.3",
     "autoprefixer": "^10.4.17",
@@ -133,7 +134,7 @@
     "eslint-cli": "^1.1.1",
     "eslint-plugin-react": "7.30.1",
     "eslint-plugin-surveyjs": "file:eslint-surveyjs",
-    "eslint-plugin-vue": "^7.16.0",
+    "eslint-plugin-vue": "^9.3.0",
     "file-loader": "0.10.0",
     "generate-json-webpack-plugin": "^1.0.0",
     "get-func-name": "2.0.0",
@@ -214,4 +215,4 @@
     "signature_pad": "^4.1.5",
     "vite": "^3.1.8"
   }
-}
+}

src/plugins/react/reactquestiondate.tsx

@@ -25,7 +25,6 @@ export default class SurveyQuestionDate extends React.Component<any, any> {
     var funcText = this.question.getjQueryScript(this.getDateId());
     var scriptText = "$(function () { " + funcText + " });";
     var rootId = this.getDivId();
-    // eslint-disable-next-line no-restricted-globals
     var scriptEl = document.createElement("script");
     scriptEl.type = "text/javascript";
     scriptEl.text = scriptText;

src/vue/checkbox.vue

@@ -1,5 +1,5 @@
 <template>
-  <fieldset :class="question.getSelectBaseRootCss()" 
+  <fieldset :class="question.getSelectBaseRootCss()"
     :role="question.a11y_input_ariaRole"
     :aria-required="question.a11y_input_ariaRequired"
     :aria-label="question.a11y_input_ariaLabel"
@@ -28,20 +28,20 @@
     <div :class="question.cssClasses.rootRow" v-if="question.blockedRow">
     <component
       v-if="!question.hasColumns && question.blockedRow"
-      v-for="(item, index) in question.dataChoices"
+      v-for="item in question.dataChoices"
       :key="item.value"
       :is="question.itemComponent"
       :question="question"
       :item="item"
     ></component>
     </div>
-    <div 
+    <div
       v-if="question.hasColumns"
       :class="question.cssClasses.rootMultiColumn">
 
     <div
-
       v-for="(column, colIndex) in question.columns"
+      v-bind:key="colIndex"
       :class="question.getColumnClass()"
       role="presentation"
     >
@@ -55,7 +55,7 @@
     </div>
     </div>
         <component
-        v-for="(item, index) in question.footItems"
+        v-for="item in question.footItems"
         v-if="question.hasFootItems"
         :key="item.value"
         :is="question.itemComponent"

src/vue/components/action-bar/action-bar-item-dropdown.vue

@@ -33,8 +33,8 @@
         >{{ item.title }}</span
       >
     </button>
-    <sv-popup 
-      :model="item.popupModel" 
+    <sv-popup
+      :model="item.popupModel"
       :getTarget="getTarget"></sv-popup>
   </div>
 </template>

src/vue/components/action-bar/action-bar.vue

@@ -39,7 +39,7 @@ export class ActionBarViewModel extends BaseVue {
   getModel(): ActionContainer<Action> {
     return this.model;
   }
-  
+
   mounted() {
     if (!this.model.hasActions) return;
     const container: HTMLDivElement = <HTMLDivElement>this.$el;

src/vue/components/action-bar/action.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-bind:class="item.getActionRootCss()" 
+  <div v-bind:class="item.getActionRootCss()"
       :id="item.id">
     <div class="sv-action__content">
       <sv-action-bar-separator

src/vue/components/container.vue

@@ -1,8 +1,9 @@
 <template>
   <div v-if="components.length > 0" class="sv-components-column">
-    <template v-for="(component, index) in components">
-      <component 
+    <template v-for="component in components">
+      <component
         :is="component.component"
+        :key="component.index"
         :survey="survey"
         :container="container"
         :model="component.data"

src/vue/components/header/header.vue

@@ -3,7 +3,8 @@
     <div v-if="!!model.backgroundImage" :class="model.backgroundImageClasses" :style="model.backgroundImageStyle"></div>
     <div v-if="!survey.isMobile" :class="model.contentClasses" :style="{ maxWidth: model.maxWidth }">
     <sv-header-cell
-      v-for="cell in model.cells"
+      v-for="(cell, index) in model.cells"
+      v-bind:key="index"
       :model="cell"
     ></sv-header-cell>
     </div>

src/vue/components/list/list-item.vue

@@ -10,7 +10,7 @@
     v-on:click="click"
     v-key2click
   >
-    <div 
+    <div
       v-if="item.needSeparator"
       v-bind:class="model.cssClasses.itemSeparator"
       />

src/vue/components/loading-indicator.vue

@@ -4,8 +4,8 @@
   </div>
 </template>
 <script lang="ts">
-import { Component } from 'vue-property-decorator';
-import Vue from 'vue';
+import { Component } from "vue-property-decorator";
+import Vue from "vue";
 
 @Component
 export class LoadingIndicatorComponent extends Vue {}

src/vue/components/paneldynamic-actions/paneldynamic-next-btn.vue

@@ -3,15 +3,15 @@
     <sv-svg-icon :iconName="question.cssClasses.progressBtnIcon" :size="'auto'"></sv-svg-icon>
   </div>
 </template>
-      
+
 <script lang="ts">
 import Vue from "vue";
 import { Component } from "vue-property-decorator";
 import { PaneldynamicAction } from "./paneldynamic-add-btn.vue";
 
 @Component
 export class PanelDynamicNextBtn extends PaneldynamicAction {
-   nextPanelClick() {
+  nextPanelClick() {
     this.question.goToNextPanel();
   }
 }

src/vue/components/paneldynamic-actions/paneldynamic-prev-btn.vue

@@ -3,15 +3,15 @@
     <sv-svg-icon :iconName="question.cssClasses.progressBtnIcon" :size="'auto'"></sv-svg-icon>
   </div>
 </template>
-      
+
 <script lang="ts">
 import Vue from "vue";
 import { Component } from "vue-property-decorator";
 import { PaneldynamicAction } from "./paneldynamic-add-btn.vue";
 
 @Component
 export class PanelDynamicPrevBtn extends PaneldynamicAction {
-   prevPanelClick() {
+  prevPanelClick() {
     this.question.goToPrevPanel();
   }
 }

src/vue/components/rating/rating-dropdown-item.vue

@@ -15,7 +15,7 @@ import { BaseVue } from "../../base";
 @Component
 export class RatingItem extends BaseVue {
   @Prop() item: any;
-  
+
   constructor() {
     super();
   }

src/vue/components/rating/rating-item-smiley.vue

@@ -16,7 +16,6 @@ import { Component, Prop } from "vue-property-decorator";
 import { RenderedRatingItem, QuestionRatingModel, Action } from "survey-core";
 import { BaseVue } from "../../base";
 
-
 @Component
 export class RatingItemSmiley extends BaseVue {
   @Prop() item: RenderedRatingItem;

src/vue/components/rating/rating-item-star.vue

@@ -1,6 +1,6 @@
 <template>
-  <label :key="item.value" @mousedown="question.onMouseDown()" :class="question.getItemClass(item.itemValue)" 
-  @mouseover="(e) => question.onItemMouseIn(item)" 
+  <label :key="item.value" @mousedown="question.onMouseDown()" :class="question.getItemClass(item.itemValue)"
+  @mouseover="(e) => question.onItemMouseIn(item)"
   @mouseleave="(e) => question.onItemMouseOut(item)">
     <input type="radio" class="sv-visuallyhidden" :name="question.name" :id="question.getInputId(index)"
       :value="item.value" :disabled="question.isInputReadOnly" @click="(e) => question.setValueFromClick(e.target.value)"
@@ -17,7 +17,6 @@ import { Component, Prop } from "vue-property-decorator";
 import { RenderedRatingItem, QuestionRatingModel, Action } from "survey-core";
 import { BaseVue } from "../../base";
 
-
 @Component
 export class RatingItemStar extends BaseVue {
   @Prop() item: RenderedRatingItem;

src/vue/components/rating/rating-item.vue

@@ -17,7 +17,6 @@ import { Component, Prop } from "vue-property-decorator";
 import { RenderedRatingItem, QuestionRatingModel, Action } from "survey-core";
 import { BaseVue } from "../../base";
 
-
 @Component
 export class RatingItem extends BaseVue {
   @Prop() item: RenderedRatingItem;

src/vue/components/tagbox/tagbox.vue

@@ -4,7 +4,6 @@
       v-if="!question.isReadOnly"
       :id="question.inputId"
       :tabindex="model.noTabIndex ? undefined : 0"
-      v-model="question.renderedValue"
       v-bind:disabled="question.isInputReadOnly"
       @keydown="keyhandler"
       @blur="blur"

src/vue/customwidget.vue

@@ -31,9 +31,7 @@ export class CustomWidget extends Vue {
   get hasVueComponent(): boolean {
     var options = (<any>Vue)["options"];
     if (!options) return false;
-    return (
-      options.components && options.components[this.question.customWidget.name]
-    );
+    return !!(options.components && options.components[this.question.customWidget.name]);
   }
   get componentName(): string {
     if (this.hasVueComponent) return this.question.customWidget.name;