Merge pull request #16 from webdevnerdstuff/dev

Dev

Author: webdevnerdstuff

src/documentation/components/examples/ButtonsFieldExample.vue

@@ -211,6 +211,18 @@ const buttonAlignOptions = [
 		title: 'End',
 		value: 'end',
 	},
+	{
+		title: 'Space Between',
+		value: 'space-between',
+	},
+	{
+		title: 'Space Around',
+		value: 'space-around',
+	},
+	{
+		title: 'Space Evenly',
+		value: 'space-evenly',
+	},
 ];
 const buttonBlock = ref(false);
 const buttonDensityModel = ref('default' as const);

src/plugin/VStepperForm.vue

@@ -174,7 +174,7 @@ import {
 import {
 	useBuildSettings,
 	useColumnErrorCheck,
-	useMergeProps,
+	useDeepMerge,
 } from './composables/helpers';
 import componentEmits from './utils/emits';
 import { AllProps } from './utils/props';
@@ -190,7 +190,7 @@ const injectedOptions = inject(globalOptions, {});
 
 // -------------------------------------------------- Props //
 const props = withDefaults(defineProps<Props>(), AllProps);
-let stepperProps: Settings = reactive<Settings>(useMergeProps(attrs, injectedOptions, props));
+let stepperProps: Settings = reactive<Settings>(useDeepMerge(attrs, injectedOptions, props));
 const { direction, title, width } = toRefs(props);
 const pages = reactive<Page[]>(props.pages);
 const originalPages = JSON.parse(JSON.stringify(pages));
@@ -208,7 +208,7 @@ const stepperSettings = computed(() => useBindingSettings(settings.value as Part
 ]));
 
 watch(props, () => {
-	stepperProps = useMergeProps(attrs, injectedOptions, props);
+	stepperProps = useDeepMerge(attrs, injectedOptions, props);
 	settings.value = useBuildSettings(stepperProps);
 }, { deep: true });
 

src/plugin/components/fields/VSFButtonField/VSFButtonField.vue

@@ -31,9 +31,6 @@
 				<v-item
 					v-for="option, key in field?.options"
 					:key="option.value"
-					:class="{
-						'vsf-button-field__stacked': field?.stacked,
-					}"
 				>
 					<template #default>
 						<v-btn
@@ -48,6 +45,7 @@
 								[`${field.selectedClass}`]: isActive(option.value),
 							}"
 							:color="option?.color || field?.color || settings?.color"
+							data-test-id="vsf-button-field"
 							:density="fieldDensity"
 							:height="getHeight(option)"
 							:icon="getIcon(option, 'icon')"
@@ -360,7 +358,8 @@ const buttontextcolor = ref('rgb(var(--v-theme-on-surface))');
 // -------------------------------------------------- Classes //
 const itemGroupClass = computed(() => {
 	return {
-		[`align-${field?.align}`]: field?.align != null,
+		[`align-${field?.align}`]: field?.align != null && field?.block,
+		[`justify-${field?.align}`]: field?.align != null && !field?.block,
 		'd-flex': true,
 		'flex-column': field?.block,
 		[`ga-${gap.value}`]: !containsSizeUnit(gap.value),

src/plugin/composables/__tests__/__snapshots__/classes.test.ts.snap

@@ -1,10 +1,46 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Classes Composable > useContainerClasses > should return class object 1`] = `
+exports[`Classes Composable > useColumnClasses > should return column classes with fieldColumns being the higher priority 1`] = `
+{
+  "v-col-12": true,
+  "v-col-lg-6": true,
+  "v-col-md-6": true,
+  "v-col-sm-10": true,
+  "v-col-xl-9": true,
+  "v-cols": true,
+}
+`;
+
+exports[`Classes Composable > useContainerClasses > should return class object with direction horizontal 1`] = `
+{
+  "d-flex flex-column justify-center align-center": true,
+  "v-stepper-form": true,
+  "v-stepper-form--container": true,
+  "v-stepper-form--container-horizontal": true,
+}
+`;
+
+exports[`Classes Composable > useContainerClasses > should return class object with direction vertical 1`] = `
 {
   "d-flex flex-column justify-center align-center": false,
   "v-stepper-form": true,
   "v-stepper-form--container": true,
-  "v-stepper-form--container-undefined": true,
+  "v-stepper-form--container-vertical": true,
+}
+`;
+
+exports[`Classes Composable > useStepperContainerClasses > should return class object with direction horizontal 1`] = `
+{
+  "d-flex flex-column justify-center align-center": true,
+  "v-stepper-form--container-stepper": true,
+  "v-stepper-form--container-stepper-horizontal": true,
+}
+`;
+
+exports[`Classes Composable > useStepperContainerClasses > should return class object with direction vertical 1`] = `
+{
+  "d-flex flex-column justify-center align-center": false,
+  "v-stepper-form--container-stepper": true,
+  "v-stepper-form--container-stepper-vertical": true,
 }
 `;

src/plugin/composables/__tests__/classes.test.ts

@@ -1,15 +1,67 @@
 import { describe, it, expect } from 'vitest';
 import {
-	useContainerClasses
+	useColumnClasses,
+	useContainerClasses,
+	useStepperContainerClasses,
 } from '../classes';
 
 
 describe('Classes Composable', () => {
 
 	describe('useContainerClasses', () => {
-		it('should return class object', () => {
+		it('should return class object with direction horizontal', () => {
 			const classes = useContainerClasses({
-				isOption: true,
+				direction: 'horizontal',
+			});
+
+			expect(classes).toMatchSnapshot();
+		});
+
+		it('should return class object with direction vertical', () => {
+			const classes = useContainerClasses({
+				direction: 'vertical',
+			});
+
+			expect(classes).toMatchSnapshot();
+		});
+	});
+
+	describe('useStepperContainerClasses', () => {
+		it('should return class object with direction horizontal', () => {
+			const classes = useStepperContainerClasses({
+				direction: 'horizontal',
+			});
+
+			expect(classes).toMatchSnapshot();
+		});
+
+		it('should return class object with direction vertical', () => {
+			const classes = useStepperContainerClasses({
+				direction: 'vertical',
+			});
+
+			expect(classes).toMatchSnapshot();
+		});
+	});
+
+	describe('useColumnClasses', () => {
+		it('should return column classes with fieldColumns being the higher priority', () => {
+			const columnsMerged = {
+				lg: 12,
+				md: 12,
+				sm: 10,
+				xl: 9,
+			};
+
+			const fieldColumns = {
+				lg: 6,
+				md: 6,
+			};
+
+			const classes = useColumnClasses({
+				columnsMerged,
+				fieldColumns,
+				propName: 'foo field',
 			});
 
 			expect(classes).toMatchSnapshot();

src/plugin/composables/__tests__/helpers.test.ts

@@ -1,6 +1,7 @@
 import { describe, it, expect } from 'vitest';
 import {
 	useColumnErrorCheck,
+	useDeepMerge,
 } from '../helpers';
 
 describe('Helpers Composable', () => {
@@ -35,4 +36,79 @@ describe('Helpers Composable', () => {
 			});
 		});
 	});
+
+	describe('useDeepMerge', () => {
+		it('should deep merge 3 objects', () => {
+
+			const attrs = { class: 'foo-class' };
+
+			const injectedOptions = {
+				autoPage: false,
+				autoPageDelay: 1000,
+				color: 'primary',
+				density: 'compact',
+				fieldColumns: {
+					lg: 12,
+					md: 12,
+					sm: 6,
+				},
+				summaryColumns: {
+					md: 12,
+					sm: 6,
+				},
+				zed: {
+					foo: {
+						bar: 'baz',
+						qux: 'qux',
+					},
+				},
+			};
+
+			const props = {
+				autoPage: true,
+				autoPageDelay: 250,
+				color: 'secondary',
+				density: 'default',
+				fieldColumns: {
+					md: 6,
+					sm: 12,
+				},
+				summaryColumns: {
+					md: 6,
+					sm: 12,
+				},
+				zed: {
+					foo: {
+						bar: 'biz',
+					},
+				},
+			};
+
+			const mergedProps = useDeepMerge(attrs, injectedOptions, props);
+
+			expect(mergedProps)
+				.toEqual({
+					autoPage: true,
+					autoPageDelay: 250,
+					class: 'foo-class',
+					color: 'secondary',
+					density: 'default',
+					fieldColumns: {
+						lg: 12,
+						md: 6,
+						sm: 12,
+					},
+					summaryColumns: {
+						md: 6,
+						sm: 12,
+					},
+					zed: {
+						foo: {
+							bar: 'biz',
+							qux: 'qux',
+						},
+					},
+				});
+		});
+	});
 });

src/plugin/composables/helpers.ts

@@ -1,23 +1,38 @@
+/* eslint-disable @typescript-eslint/no-unsafe-argument */
 import { watchDebounced } from '@vueuse/core';
 import {
 	UseAutoPage,
 	UseBuildSettings,
 	UseColumnErrorCheck,
-	UseMergeProps,
+	UseDeepMerge,
 } from '@/plugin/types';
 
 
 /**
 * Merges props from three objects.
 */
-export const useMergeProps: UseMergeProps = (A, B, C) => {
-	const res: Record<string, any> = {};
-
-	Object.keys({ ...A, ...B, ...C }).map(key => {
-		res[key] = (C[key] ?? B[key] ?? A[key]) as any;
-	});
+type AnyObject = Record<string, any>;
+
+export const useDeepMerge: UseDeepMerge = (A, B, C) => {
+	const deepMerge = (obj1: AnyObject, obj2: AnyObject): AnyObject => {
+		const result: AnyObject = { ...obj1 };
+		for (const key in obj2) {
+			if (
+				obj2[key] &&
+				typeof obj2[key] === 'object' &&
+				!Array.isArray(obj2[key])
+			) {
+				result[key] = deepMerge(result[key] ?? {}, obj2[key]);
+			}
+			else {
+				result[key] = obj2[key];
+			}
+		}
+		return result;
+	};
 
-	return res;
+	// Merge A, B, and C with priority order C > B > A
+	return deepMerge(deepMerge(A, B), C);
 };
 
 

src/plugin/types/index.ts

@@ -257,11 +257,11 @@ export interface UseBuildSettings {
 	): Settings;
 }
 // ------------------------- Helpers //
-export interface UseMergeProps {
+export interface UseDeepMerge {
 	(
 		A: Record<string, any>,
-		B: PluginOptions,
-		C: Props
+		B: Record<string, any>,
+		C: Record<string, any>
 	): Record<string, any>;
 }