From 523cc3bf2c87718ce4ef755cedaacd090d5ca991 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hannes=20K=C3=BCttner?= <kuettner.hannes@gmail.com>
Date: Tue, 20 Feb 2024 22:22:43 +0100
Subject: [PATCH] feat: Add option to display the tab list over the full width
 of the page

---
 README.md          |  7 +++++++
 src/group-tabs.vue |  2 ++
 src/index.ts       | 19 ++++++++++++++++++-
 3 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 1a33a70..95a73d4 100644
--- a/README.md
+++ b/README.md
@@ -29,3 +29,10 @@ When creating a new field you can select `Tab Group` in the `Groups` section.
 
 Alternatively you can change the interface of an existing group field in the
 `Interface` section.
+
+### Options
+
+- `Overwrite Group Width`: If checked, force Directus to display the tab list in the "Fill Width" mode.
+Normally, the width option is not available for groups, but so far no problems have been encountered. Please open an
+issue if you encounter any visual bugs.
+
diff --git a/src/group-tabs.vue b/src/group-tabs.vue
index 5acb219..7915224 100644
--- a/src/group-tabs.vue
+++ b/src/group-tabs.vue
@@ -19,6 +19,7 @@ const props = withDefaults(
 		badge?: string;
 		rawEditorEnabled?: boolean;
 		direction?: string;
+		fillWidth?: boolean;
 	}>(),
 	{
 		batchActiveFields: () => [],
@@ -87,6 +88,7 @@ function useComputedGroup() {
 		:values="groupValues"
 		:validation-errors="validationErrors!"
 		class="group-tabs"
+		:class="fillWidth && 'fill'"
 	>
 		<template v-for="(groupField, index) in groupFields" :key="groupField.field">
 			<tab-panel
diff --git a/src/index.ts b/src/index.ts
index 76b7ff9..f233d3e 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -12,5 +12,22 @@ export default {
 	types: ['alias'],
 	localTypes: ['group'],
 	group: 'group',
-	options: [],
+	options: [
+		{
+			field: 'fillWidth',
+			type: 'boolean',
+			name: 'Overwrite Group Width',
+			meta: {
+				interface: 'boolean',
+				note: 'Normally groups can not fill the width of the page. This option allows you to overwrite that.',
+				options: {
+					label: 'Fill Width',
+				},
+				width: 'half',
+			},
+			schema: {
+				default_value: false,
+			},
+		},
+	],
 };