Update centering

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/components/fields/VSFButtonField/VSFButtonField.vue

@@ -358,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),