fix(vue): prop types warning at component level

Author: mohdashraf010897

packages/vue/.eslintrc

@@ -5,7 +5,7 @@
 		"es6": true,
 		"node": true
 	},
-	"extends": ["airbnb-base", "plugin:vue/recommended", "prettier"],
+	"extends": ["airbnb-base", "plugin:vue/vue3-recommended", "prettier"],
 	"parserOptions": {
 		"parser": "babel-eslint",
 		"ecmaVersion": 2017,

packages/vue/package.json

@@ -73,7 +73,7 @@
 		"eslint": "^4.12.0",
 		"eslint-config-airbnb-base": "^13.1.0",
 		"eslint-config-prettier": "^3.1.0",
-		"eslint-plugin-vue": "^7.20.0",
+		"eslint-plugin-vue": "^4.7.1",
 		"nps": "^5.9.3",
 		"nps-utils": "^1.7.0",
 		"postcss": "^8.4.31",

packages/vue/src/components/ReactiveBase/index.jsx

@@ -6,15 +6,14 @@ import Appbase from 'appbase-js';
 import AppbaseAnalytics from '@appbaseio/analytics';
 import 'url-search-params-polyfill';
 import { createCache } from '@appbaseio/vue-emotion';
-import { defineComponent } from 'vue';
 import Provider from '../Provider';
 import { composeThemeObject, X_SEARCH_CLIENT } from '../../utils/index';
 import types from '../../utils/vueTypes';
 import URLParamsProvider from '../URLParamsProvider.jsx';
 import getTheme from '../../styles/theme';
 
 const { setValues } = Actions;
-const ReactiveBase =defineComponent( {
+const ReactiveBase = {
 	name: 'ReactiveBase',
 	data() {
 		this.state = {
@@ -110,10 +109,10 @@ const ReactiveBase =defineComponent( {
 					...(enableTelemetry === false && { 'X-Enable-Telemetry': false }),
 				}),
 				...headers,
-				...(endpoint
-					&& endpoint.headers && {
-					...endpoint.headers,
-				}),
+				...(endpoint &&
+					endpoint.headers && {
+						...endpoint.headers,
+					}),
 			};
 		},
 	},
@@ -123,8 +122,8 @@ const ReactiveBase =defineComponent( {
 			this.key = `${this.state.key}-0`;
 		},
 		setStore(props) {
-			const credentials
-				= props.url && props.url.trim() !== '' && !props.credentials
+			const credentials =
+				props.url && props.url.trim() !== '' && !props.credentials
 					? null
 					: props.credentials;
 			let url = props.url && props.url.trim() !== '' ? props.url : '';
@@ -209,8 +208,8 @@ const ReactiveBase =defineComponent( {
 				// When endpoint prop is used index is not defined, so we use _default
 				index: appbaseRef.app || '_default',
 				globalCustomEvents:
-					this.$props.reactivesearchAPIConfig
-					&& this.$props.reactivesearchAPIConfig.customEvents,
+					this.$props.reactivesearchAPIConfig &&
+					this.$props.reactivesearchAPIConfig.customEvents,
 			};
 
 			try {
@@ -220,13 +219,13 @@ const ReactiveBase =defineComponent( {
 						/\/\/(.*?)\/.*/,
 						'//$1',
 					);
-					const headerCredentials
-						= this.$props.endpoint.headers && this.$props.endpoint.headers.Authorization;
-					analyticsInitConfig.credentials
-						= headerCredentials && headerCredentials.replace('Basic ', '');
+					const headerCredentials =
+						this.$props.endpoint.headers && this.$props.endpoint.headers.Authorization;
+					analyticsInitConfig.credentials =
+						headerCredentials && headerCredentials.replace('Basic ', '');
 					// Decode the credentials
-					analyticsInitConfig.credentials
-						= analyticsInitConfig.credentials && atob(analyticsInitConfig.credentials);
+					analyticsInitConfig.credentials =
+						analyticsInitConfig.credentials && atob(analyticsInitConfig.credentials);
 				}
 			} catch (e) {
 				console.error('Endpoint not set correctly for analytics');
@@ -288,7 +287,7 @@ const ReactiveBase =defineComponent( {
 			</Provider>
 		);
 	},
-});
+};
 ReactiveBase.install = function (Vue) {
 	Vue.component(ReactiveBase.name, ReactiveBase);
 };

packages/vue/src/components/maps/GoogleMapMarkers.jsx

@@ -53,7 +53,6 @@ const GoogleMapMarkers = {
 		const { openMarkers } = this;
 		const markerProps = {
 			openMarkers,
-			setMarkerOnTop: this.setMarkerOnTop,
 			setOpenMarkers: this.setOpenMarkers,
 			getPosition: this.getPosition,
 			renderItem: this.renderItem,

packages/vue/src/components/maps/ReactiveMap.jsx

@@ -146,6 +146,7 @@ const ReactiveMap = {
 			currentPageState,
 			mapBoxBounds: null,
 			markersData: null,
+			filteredResults: null
 		};
 		return this.__state;
 	},

packages/vue/src/components/range/RangeSlider.jsx

@@ -2,9 +2,9 @@ import VueTypes from 'vue-types';
 import { Actions, helper } from '@appbaseio/reactivecore';
 import { componentTypes } from '@appbaseio/reactivecore/lib/utils/constants';
 // eslint-disable-next-line import/extensions
-import VueSlider from 'vue-slider-component/dist-css/vue-slider-component.umd.min.js'
-import 'vue-slider-component/dist-css/vue-slider-component.css'
-import 'vue-slider-component/theme/default.css'
+import VueSlider from 'vue-slider-component/dist-css/vue-slider-component.umd.min.js';
+import 'vue-slider-component/dist-css/vue-slider-component.css';
+import 'vue-slider-component/theme/default.css';
 import Container from '../../styles/Container';
 import { connect, updateCustomQuery, isQueryIdentical } from '../../utils/index';
 import ComponentWrapper from '../basic/ComponentWrapper.jsx';

packages/vue/src/components/search/AIAnswer.jsx

@@ -118,36 +118,24 @@ const AIAnswer = defineComponent({
 		enableAI: VueTypes.bool.def(true),
 		AIConfig: types.AIConfig,
 		iconPosition: types.iconPosition.def('left'),
-		themePreset: types.themePreset,
-		theme: types.style,
 		icon: types.children,
 		iconURL: VueTypes.string.def(''),
 		renderMic: types.func,
 		getMicInstance: types.func,
 		innerClass: types.style,
 		placeholder: VueTypes.string.def('Ask a question'),
 		title: types.title,
-		AIResponse: types.componentObject,
-		isAIResponseLoading: VueTypes.bool.def(false),
-		AIResponseError: types.componentObject,
-		getAIResponse: types.func.isRequired,
 		enterButton: types.bool,
 		renderEnterButton: types.title,
 		showInput: VueTypes.bool.def(true),
 		clearSessionOnDestroy: VueTypes.bool.def(true),
-		rawData: types.rawData,
 		render: types.func,
 		onError: types.func,
 		renderError: types.title,
-		isLoading: types.boolRequired,
-		sessionIdFromStore: VueTypes.string,
-		showComponent: types.boolRequired,
-		componentError: types.componentObject,
 		style: types.style,
 		showSourceDocuments: VueTypes.bool.def(false),
 		renderSourceDocument: types.func,
 		onSourceClick: types.func,
-		isAITyping: types.boolRequired,
 		triggerOn: VueTypes.string.def(AI_TRIGGER_MODES.ALWAYS),
 		renderTriggerMessage: types.func,
 	},
@@ -216,7 +204,7 @@ const AIAnswer = defineComponent({
 			this.$emit('on-data', {
 				data: this.messages,
 				rawData: newVal,
-				loading: this.$props.isAIResponseLoading || this.$props.isLoading,
+				loading: this.isAIResponseLoading || this.$props.isLoading,
 				error: this.$props.AIResponseError,
 			});
 

packages/vue/src/utils/vueTypes.js

@@ -39,7 +39,10 @@ function validateLocation(value) {
 const types = {
 	any: VueTypes.any,
 	bool: VueTypes.bool,
-	boolRequired: VueTypes.bool.isRequired,
+	boolRequired: {
+		type: Boolean,
+		required: true
+	},
 	components: VueTypes.arrayOf(VueTypes.string),
 	compoundClause: VueTypes.oneOf(['filter', 'must']),
 	children: VueTypes.any,
@@ -114,7 +117,10 @@ const types = {
 		type: String,
 		required: false
 	},
-	stringArray: VueTypes.arrayOf(VueTypes.string),
+	stringArray: {
+		type: [String],
+		required: false
+	},
 	stringOrArray: VueTypes.oneOfType([VueTypes.string, VueTypes.arrayOf(VueTypes.string)]),
 	stringRequired: VueTypes.string.isRequired,
 	style: VueTypes.object,