feat(vue): enhance theme prop to reset default styles

Author: mohdashraf010897

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

@@ -31,7 +31,7 @@ const ReactiveBase = {
 		credentials: types.string,
 		headers: types.headers,
 		queryParams: types.string,
-		theme: VueTypes.object.def({}),
+		theme: VueTypes.oneOf([VueTypes.object.def({}), false]),
 		themePreset: VueTypes.string.def('light'),
 		type: types.string,
 		url: types.string,
@@ -54,6 +54,7 @@ const ReactiveBase = {
 		if (createCache.default) {
 			createCacheFn = createCache.default;
 		}
+		console.log(composeThemeObject(getTheme(this.$props.themePreset), this.$props.theme));
 		return {
 			theme_reactivesearch: composeThemeObject(
 				getTheme(this.$props.themePreset),

packages/vue/src/utils/index.js

@@ -15,20 +15,41 @@ export const connect = (...args) => connectToStore(...args);
 
 export const X_SEARCH_CLIENT = 'ReactiveSearch Vue';
 
-export const composeThemeObject = (ownTheme = {}, userTheme = {}) => ({
-	typography: {
-		...ownTheme.typography,
-		...userTheme.typography,
-	},
-	colors: {
-		...ownTheme.colors,
-		...userTheme.colors,
-	},
-	component: {
-		...ownTheme.component,
-		...userTheme.component,
-	},
-});
+export const composeThemeObject = (ownTheme = {}, userThemeParam = {}) => {
+	let userTheme = {};
+	if (userThemeParam) {
+		userTheme = { ...userThemeParam };
+	} else {
+		userTheme = {
+			typography: {
+				fontFamily: 'inherit',
+				fontSize: 'inherit',
+			},
+			colors: {
+				textColor: 'inherit',
+				primaryTextColor: 'inherit',
+				primaryColor: 'inherit',
+				titleColor: 'inherit',
+				alertColor: 'inherit',
+				borderColor: 'inherit',
+			},
+		};
+	}
+	return {
+		typography: {
+			...ownTheme.typography,
+			...userTheme.typography,
+		},
+		colors: {
+			...ownTheme.colors,
+			...userTheme.colors,
+		},
+		component: {
+			...ownTheme.component,
+			...userTheme.component,
+		},
+	};
+};
 /**
  * To determine wether an element is a function
  * @param {any} element
@@ -120,15 +141,15 @@ export const hasQuerySuggestionsRenderer = (_ref = {}) => {
  * @returns {string}
  */
 export const getCamelCase = (str = '') => {
-	const propsWhichRequirePascalCase = ['u-r-l-params']
+	const propsWhichRequirePascalCase = ['u-r-l-params'];
 	const arr = str.split('-');
 	const capital = arr.map((item, index) =>
 		index ? item.charAt(0).toUpperCase() + item.slice(1).toLowerCase() : item,
 	);
 	// ^-- change here.
 	let capitalString = capital.join('');
-	if(propsWhichRequirePascalCase.includes(str))
-		capitalString = capitalString[0].toUpperCase() + capitalString.substring(1)
+	if (propsWhichRequirePascalCase.includes(str))
+		capitalString = capitalString[0].toUpperCase() + capitalString.substring(1);
 	return capitalString || '';
 };