Merge pull request #2209 from appbaseio/disable-styling-prop

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

Author: siddharthlatest

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.bool, VueTypes.object.def({})]),
 		themePreset: VueTypes.string.def('light'),
 		type: types.string,
 		url: types.string,
@@ -275,6 +275,7 @@ const ReactiveBase = {
 					className={className}
 					getSearchParams={this.getSearchParams}
 					setSearchParams={this.setSearchParams}
+					userThemeProp={this.$props.theme}
 				>
 					{children()}
 				</URLParamsProvider>

packages/vue/src/components/URLParamsProvider.jsx

@@ -17,6 +17,7 @@ const URLParamsProvider = {
 		getSearchParams: types.func,
 		setSearchParams: types.func,
 		as: VueTypes.string.def('div'),
+		userThemeProp: VueTypes.oneOf([VueTypes.bool, VueTypes.object.def({})]),
 	},
 	mounted() {
 		this.init();
@@ -238,7 +239,11 @@ const URLParamsProvider = {
 	render() {
 		const children = this.$slots.default();
 		return (
-			<Base as={this.$props.as} class={this.$props.className}>
+			<Base
+				as={this.$props.as}
+				class={this.$props.className}
+				userThemeProp={this.$props.userThemeProp}
+			>
 				{children}
 			</Base>
 		);

packages/vue/src/styles/Base.js

@@ -13,10 +13,12 @@ const Base = ({
 };
 
 export default styled(Base)`
-	font-family: ${({ theme }) =>
-		theme && theme.typography ? theme.typography.fontFamily : 'unset'};
-	font-size: ${({ theme }) => (theme && theme.typography ? theme.typography.fontSize : 'unset')};
-	color: ${({ theme }) => (theme && theme.colors ? theme.colors.textColor : 'unset')};
+	${({ userThemeProp, theme }) =>
+		userThemeProp === false
+			? ''
+			: `font-family: ${theme && theme.typography ? theme.typography.fontFamily : 'unset'};
+	font-size: ${theme && theme.typography ? theme.typography.fontSize : 'unset'};
+	color: ${theme && theme.colors ? theme.colors.textColor : 'unset'};`}
 	width: 100%;
 
 	input,

packages/vue/src/utils/index.js

@@ -15,20 +15,26 @@ 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 (typeof userThemeParam !== 'boolean' && Object.keys(userThemeParam).length) {
+		userTheme = { ...userThemeParam };
+	}
+	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 +126,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 || '';
 };